添加到购物车而不使用 JavaScript 刷新 - Add to cart without refreshing using JavaScript

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

<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('');
    });
}

您正在按 id 提交表单： $（"#myform"）.submit（function（）{}这里的问题是，您在此处为所有三个表单提供了相同的ID，请确保每个表单都有不同的ID。按钮 ID 也应该是唯一的

正如

@asim所提到的，重复的ID是问题所在。请尝试以下代码。

Working js fiddle.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('');
        });
    }

单个HTML文件上的ID不能重复。如果重复，第一个 ID 将起作用，其余 ID 将无效。这就是为什么 $（"#myform"）仅适用于第一种形式。