Laravel提交编辑表单仅修改第一条ID对应数据问题求解

错误定位及修复方案 #

1. 模态框DOM ID重复 #

• 循环渲染Datatable行时给所有编辑模态框使用了相同的固定ID，浏览器默认仅识别DOM树中第一个匹配ID的元素，导致无论点击哪行编辑，提交时始终绑定第一行的表单数据
• 修复方案：给每行模态框ID追加当前任务唯一标识，例如id="editTaskModal-{{ $task->id }}"，对应编辑按钮的触发属性同步修改为data-bs-target="#editTaskModal-{{ $task->id }}"（Bootstrap模态框场景）

2. 表单提交路由/ID绑定错误 #

• 全局绑定单个编辑表单的提交事件时，未在每次打开模态框时更新当前要提交的任务ID，提交请求默认使用第一次初始化时第一行的任务ID
• 修复方案：
  • 点击编辑按钮时将当前任务ID存入临时变量，提交时动态拼接更新路由：url: "{{ route('tasks.update', '') }}/" + currentTaskId
  • 或每次打开模态框时动态修改表单的action属性为对应任务的更新路由

3. 动态DOM事件绑定失效 #

• 开启Datatable分页/搜索筛选功能时，非首行的DOM元素是动态渲染的，初始化阶段绑定的表单提交/编辑按钮点击事件未作用于后续生成的元素
• 修复方案：使用事件委托绑定事件，例jQuery写法：$(document).on('submit', '.edit-task-form', function () { /* 提交逻辑 */ })

4. 表单隐藏域ID冲突 #

• 编辑表单中存储任务ID的隐藏域使用了固定ID，回填数据时仅修改了第一个匹配ID的隐藏域值，提交时始终传递第一行的任务ID
• 修复方案：回填数据时使用作用域选择器定位当前激活模态框内的隐藏域，例：$('.modal.show input[name="task_id"]').val(currentTaskId)

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