javascript - 多个表单，多个提交按钮，1个使用ajax处理表单

Question

在我的页面上，我总共有 18 个从数据库生成的表单，每个表单都有一个类别，并允许用户更新任何类别中的价格。所有表单都有相同的 id，我假设我可以通过单击处理所有表单，但是如果单击提交按钮 1，它只会更新表单 1，任何其他按钮只会重新加载页面，是否有如何做到这一点，而不需要给每个表单一个数字 ID，然后在我的提交函数上添加大量 if 语句？

我的表单代码:

<?php

$shopid = $_GET['user'];

$db = new PDO('mysql:host=localhost;dbname=servershop', 'user', '****');
$stmt = $db->prepare("SELECT DISTINCT group_ID FROM `items` Order By group_id");
$stmt->execute();
$gpID = $stmt->fetchAll(PDO::FETCH_ASSOC);

foreach($gpID as $igroup)
{
    $groupID = $igroup['group_ID'];

    $db = new PDO('mysql:host=localhost;dbname=servershop', 'shop', '1butter22');
    $stmt = $db->prepare("SELECT name FROM groups WHERE id = '$groupID'");
    $stmt->execute();
    $groupname = $stmt->fetchColumn();
    ?>
    <details>
    <summary><?php echo $groupname;?></summary>
    <div class="ccontainer">
    <div class="ccontent">
    <form id="savechanges">
    <input type="hidden" value="prices" id="tag" name="tag">
    <input type="hidden" value="<?php echo $shopid;?>" id="shopid" name="shopid">
    <input type="submit" value="Save" id="submit">

    <?php 


        $stmt = $db->prepare("SELECT * FROM `items` WHERE group_id = '$groupID'");
        $stmt->execute();
        $arr = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo '<table class="itemTable">';
        echo '<tr><td>Name & Quantity</td><td>Image</td><td>Price</td></tr>';
        foreach ($arr as $item)
        {

            echo '<tr><td>' . $item['name'] . '('. $item['quantity'] .')</td>';
            echo '<td><img src="images/items/' . $item['image'] . '" /></td>';
            echo '<input type="hidden" value=' . $item['id'] .' name="itemid[]">';


                $stmt = $db->prepare("SELECT price FROM prices WHERE shop_id = :shop AND item_id = :item");
                $stmt->bindParam(':shop', $shopid);
                $stmt->bindParam(':item', $item['id']);
                $stmt->execute();
                $barr = $stmt->fetchColumn();
                if(!empty($barr))
                    {
                        echo '<td><input type="text" name="price[]"  value="'. $barr .'" /></td></tr>';
                    }
                else
                    {
                        echo '<td><input type="text" name="price[]" value="0.0" /></td></tr>';
                    }
        }


    ?>
</table>
</form>
</summary>
</details>
<?php } ?>

和我的处理代码:(取自较大的脚本)

 document.getElementById('savechanges').onsubmit=function (e)
            {
                e.preventDefault();
                var f = $("#savechanges");
                request = $.ajax(
                    {
                        url: "processing/db.php",
                        type: "POST",
                        data: f.serialize(),
                        cache: false
                    }
                                );

编辑:

使用已接受的答案中的想法，技巧是只创建一个表单，并将所有输入按表单类序列化，理论上，这现在应该与 id 以及类、处理的执行时间一起使用所有 120 个奇数项都从平均 60ms 上升到 105ms，这不是一个 Not Acceptable 增长!

Answer 1

id 属性应该是唯一的。尝试为所有表单提供一个公共(public)类而不是 id，然后在提交时使用公共(public)类序列化所有这些表单。

如果您在包含多个表单的页面上运行 $('form').serialize()，它将正确地将所有表单序列化为一个字符串。

要包含具有某些特定类的表单，请使用 $('.myforms').serialize();