同一PHP页面中多AJAX表单提交异常问题求助

Hey Martyn，我来帮你搞定这个问题！

问题根源 #

你现在遇到的核心问题是：所有表单都用了同一个id="search_form"，而jQuery通过ID选择器（$("#search_form")）只会选中第一个匹配的元素，所以不管你点哪个复选框，提交的永远是第一个表单的数据。

解决方案 #

我们需要让脚本能够识别当前复选框所属的表单，而不是硬编码固定的表单ID。具体步骤如下：

1. 优化HTML表单（可选但推荐）

首先把表单的固定ID改成class（或者保留ID但设置为动态唯一值，比如基于每行的$row1[0]），同时给input的value属性加上双引号，避免特殊字符导致的解析问题：

<!-- 用class标识表单，每个表单都是独立的 -->
<form class="register-form" method="post">
    <input readonly type="text" name="id" value="<?php echo $row1[0];?>">
    <input readonly type="text" name="student" value="<?php echo $row1[1];?>">
    <input readonly type="text" name="addedby" value="<?php echo $_SESSION['username'];?>">
    <input readonly type="text" name="register" value="monday_morning">
    <input <?php if($row1[4] == "Yes"){echo "checked";}?> type="checkbox" name="box" value="Yes">
</form>

2. 修改AJAX脚本

关键是通过当前触发事件的复选框，找到它所在的父表单，而不是固定选择某个ID的表单：

<script type="text/javascript">
$(document).on("change", '[type="checkbox"]', function () {
    var url = "/register_update.php";
    // 找到当前复选框所属的表单（向上查找最近的form元素）
    var targetForm = $(this).closest('form');
    
    $.ajax({
        dataType: "html",
        type: "POST",
        url: url,
        data: targetForm.serialize(), // 序列化当前表单的数据
        success: function (data) {
            // 这里可以添加成功后的逻辑，比如提示用户操作完成
            // console.log("提交成功：", data);
        }
    });
    return false;
});
</script>

原理说明 #

• $(this)指代当前被点击/切换的复选框元素
• .closest('form')会向上遍历DOM树，找到离这个复选框最近的<form>标签，这样不管页面有多少个表单，都能精准匹配到当前复选框所属的那个
• 最后序列化这个表单的数据提交，就不会再出现只提交第一个表单的问题了

内容的提问来源于stack exchange，提问作者Martyn