Question

当我按添加到购物车按钮时，数据应插入数据库，并应显示在表单的正上方，而不会重定向到查询页面。在此代码中，第一个表单正常工作，但接下来的两个表单是第一个表单的副本不起作用。问题是接下来的两个表单在提交时会被重定向到查询页面。索引页面代码是：

<html>
<head>
    <title>fetch</title>
</head>
<body>
    <ul></ul>
        <form action="userInfo.php" method="post" id="myform">
            name: <input type="text" name="name" /><br>
            age: <input type="text" name="age" /><br>

            <button id="sub">save</button>
        </form>

        <form action="userInfo.php" method="post" id="myform">
            name: <input type="text" name="name" /><br>
            age: <input type="text" name="age" /><br>

            <button id="sub">save</button>
        </form>

        <form action="userInfo.php" method="post" id="myform">
            name: <input type="text" name="name" /><br>
            age: <input type="text" name="age" /><br>

            <button id="sub">save</button>
        </form>

        <span id="result1"></span>
        <script type="text/javascript" src="http://localhost/json/jquery.js"></script>
        <script type="text/javascript" src="http://localhost/json/my_script.js"></script>
        <script type="text/javascript" src="http://localhost/json/my_script2.js"></script>
    </body>
</html>

查询代码为：

<?php 
include_once('http://loaclhost/json/conn.php');
$name = $_POST['name'];
$age = $_POST['age'];

if(mysql_query("INSERT INTO users VALUES('$name','$age')"))
    echo "successfully";
else
    echo "failed";

JavaScript代码是：

$("#sub").click(function(){
    $.post($("#myform").attr("action"),$("#myform :input").serializeArray(), function(info){$("#result1").html(info); });
    clearinput();
});

$("#myform").submit(function(){
    return false;
});

function clearinput()
{
    $("#myform :input").each(function(){
        $(this).val('');
    });
}

Answer 1

您将通过ID提交表单：$（＆＃34; #myform＆＃34;）。submit（function（）{} 这里的问题是你在这里为所有三种形式提供了相同的id，确保每个表单都有不同的id。按钮ID应该是唯一的

Answer 2

正如@asim所提到的，重复的id是问题。遵循代码。

工作js小提琴。http://jsfiddle.net/gw84j7hg/。（使用id选择器）

使用班级选手http://jsfiddle.net/gw84j7hg/2/

更新了小提琴

表格代码。

<form action="userInfo.php" method="post" id="myform" class="formSelecterClass">
                name: <input type="text" name="name" /><br>
                age: <input type="text" name="age" /><br>

                <button class="formSubmitButtonClass" id="sub">save</button>

            </form>


            <form action="userInfo.php" method="post" id="myform2"
     class="formSelecterClass" >
                name: <input type="text" name="name" /><br>
                age: <input type="text" name="age" /><br>

                <button class="formSubmitButtonClass" id="sub1">save</button>

            </form>


            <form action="userInfo.php" method="post" id="myform3"
         class="formSelecterClass">
                name: <input type="text" name="name" /><br>
                age: <input type="text" name="age" /><br>

                <button class="formSubmitButtonClass" id="sub2">save</button>

            </form>
            <span id="result1"></span>

JS代码

$(".formSubmitButtonClass").click(function(){

        $.post($(".formSelecterClass").attr("action"),$(".formSelecterClass :input").serializeArray(), function(info){$("#result1").html(info); });
        clearinput();
    });

    $(".formSelecterClass").submit(function(){
        return false;
    });

    function clearinput()
    {
        $(".formSelecterClass :input").each(function(){
            $(this).val('');
        });
    }

Answer 3

单个HTML文件上的ID无法重复。如果重复，第一个ID将会运行，其余ID将无效。这就是$（“＃myform”）仅适用于第一种形式的原因。

添加到购物车而不使用JavaScript刷新

3 个答案: