如何将PHP foreach循环中的变量传递到外部Modal组件

步骤1：修改循环内的触发按钮 #

给触发Modal的<a>标签添加data-*属性，存储当前用户的ID和全名，方便后续JS读取：

<?php foreach($users_list as $users) { ?>
<tr>
  <td><?php echo $users['id']; ?></td>
  <td><?php echo $users['first_name'] . ' ' . $users['middle_name'] . ' ' . $users['last_name']; ?></td>
  <td>
    <a class="ptoModal" href="#ptoModal" data-toggle="modal"
       data-user-id="<?php echo $users['id']; ?>"
       data-full-name="<?php echo $users['first_name'] . ' ' . $users['middle_name'] . ' ' . $users['last_name']; ?>">
      <i class="fa fa-plus" title="Add PTO"></i> Set up PTO
    </a>
  </td>
<?php }?>

步骤2：调整Modal结构，预留动态内容位置 #

将Modal中需要动态替换的用户信息改为占位结构，隐藏的user_id输入框初始值留空：

<div class="modal fade" id="ptoModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalLabel">Set up PTO for <span id="modalUserName"></span></h5>
      </div>
      <div class="modal-body">
        <form class="pto" id="pto" name="pto">
          <!-- 其他表单字段保留原结构 -->
          <input type="hidden" name="user_id" id="user_id" class="user_id" value="">
          <input type="hidden" name="action" id="action" class="action" value="pto">
          <button type="submit" class="btn btn-primary mr-2">Insert PTO / SL</button>
        </form>
      </div>
    </div>
  </div>
</div>

步骤3：完善Modal弹出的JS逻辑 #

点击按钮时，从data-*属性中取出用户数据，填充到Modal对应的位置：

$(document).on("click", ".ptoModal", function () {
  // 获取当前点击按钮绑定的用户数据
  const userId = $(this).data('user-id');
  const fullName = $(this).data('full-name');
  
  // 将数据填充到Modal的对应位置
  $('#modalUserName').text(fullName);
  $('#user_id').val(userId);
});

步骤4：优化表单提交脚本 #

确保提交时能正确获取动态填充的user_id，同时补充前后端交互的基础处理：

$('form.pto').submit(function (event) {
  event.preventDefault(); // 先阻止表单默认提交行为
  
  var formData = {
    user_id:  $('#user_id').val(),
    earnedPto:$('#earnedPto').val(),
    earnedSl: $('#earnedSl').val(),
    remarks:  $('#remarks').val(),
    action:   $('#action').val()
  };

  $.ajax({
      type: 'POST',
      url: site_url + '/create-user/save.php',
      data: formData,
      success: function(response) {
        // 提交成功后的可选处理：关闭Modal、提示用户
        $('#ptoModal').modal('hide');
        alert('PTO设置成功');
      },
      error: function() {
        // 提交失败的可选提示
        alert('提交失败，请重试');
      }
  });
});

核心逻辑说明 #

• 通过data-*属性将用户数据绑定到触发按钮上，避免循环内重复渲染Modal导致的DOM冲突
• 循环外仅保留一个Modal实例，通过JS动态填充内容，既节省DOM资源，又能准确匹配每个用户的信息
• 隐藏的user_id输入框会被动态赋值，提交表单时可直接传递到后端接口

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