如何将变量传递到模态框？解决列表按钮触发仅加载首个report_id问题

要实现点击不同行的按钮传递对应report_id到模态框，按以下步骤修改代码即可：

步骤1：修改模态框内的隐藏输入框 #

给隐藏输入框添加id，方便后续JS赋值，把模态框中原有的隐藏域代码替换为：

<input type="hidden" name="report_id" id="modal_report_id" value="">

步骤2：修改表格内的触发按钮 #

给按钮添加自定义属性存储当前行的report_id，同时调整按钮显示文本（原按钮显示post_id不符合使用习惯），把循环内的按钮代码替换为：

<input type="button" value="处理举报" data-report-id="<?php echo $row->report_id ?>" onclick="openDialog('dialog1', this)" class="govuk-button govuk-button--warning" data-module="govuk-button">

步骤3：添加openDialog的JS逻辑 #

在页面底部（</body>标签之前）添加如下JS代码，实现点击按钮时给模态框赋值并弹出：

function openDialog(dialogId, triggerBtn) {
  // 读取当前按钮携带的report_id
  const currentReportId = triggerBtn.dataset.reportId;
  // 赋值到模态框的隐藏输入框
  document.getElementById('modal_report_id').value = currentReportId;
  // 移除hidden类显示模态框
  document.getElementById(dialogId).classList.remove('hidden');
}

修改完成后，你点击任意行的「处理举报」按钮，弹出的模态框就会携带对应行的report_id，提交表单时该值会同步POST到你的控制器接口，直接读取report_id参数即可使用。

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