多個表單，多個提交按鈕，1個使用ajax的處理表單

Question

在我的頁面上，我總共有18個表單，這些表單是從數據庫生成的，每個表單都為我們提供了一個類別，並允許用戶更新任何類別中的價格。 所有表單都具有相同的ID，我以為便可以通過單擊來處理所有表單，但是，如果單擊了提交按鈕1，它只會更新表單1，其他任何按鈕都只是重新加載頁面，是否有這樣做的方式是不給每個表單一個數字id，然后在我的Submit函數上添加大量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個奇數的執行時間項目已從平均60毫秒增加到105毫秒，這不是不可接受的增長！

Answer 1

id屬性是唯一的。 嘗試給所有表單一個公共類而不是一個id，然后在提交時使用公共類序列化所有這些表單。

如果您在具有多個表單的頁面上運行$('form').serialize() ，它將正確地將所有表單序列化為一個字符串。

要包含具有某些$('.myforms').serialize();類的表單，請使用$('.myforms').serialize();

Answer 2

我可以給你一個想法。 只需將每個元素中的表單ID設置為數據屬性即可。 喜歡

<input name='test' data-formId='yourformId' class='changed' />

並在類別更改時將一個類添加到已命名的更改類（如上所述）。

現在，在發布數據時，使用jquery從具有類更改的元素中獲取所有表單ID和更改的值。 現在，您可以處理所需的數據。

這樣，您可以僅從已更改數據的表單中選擇數據。

如果這樣可以幫助您，別忘了接受答案。