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

Question

On my page I have a total of 18 forms which are generated from a database, each form us a category and allows the user to update a price in any of the categories. All forms have the same id, I was assuming that then I would be able to process all of them with a click, however it will only update form 1 if submit button 1 is clicked, any other button just reloads the page, is there a way of doing this with out giving every form a numerical id then a massive if statement on my submit function?

My Code for the forms:

<?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 } ?>

and my processing code:(taken from a larger script)

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

EDIT:

Using the idea in the accepted answer, the trick was the just create one form and have all the inputs serialized by the class of form, in theory, this should now work with id as well as the class, execution time to process all 120 odd items has risen from an average of 60ms to 105ms, not a unacceptable increase!

Answer 1

id attribute is meant to be unique. Try giving a common class to all forms instead of an id and then on submit serialize all these forms using the common class.

If you run $('form').serialize() on a page with multiple forms, it will correctly serialize all the forms into one string.

To include forms with some perticular class, use $('.myforms').serialize();