如何将 PHP 变量从 foreach 循环传递到循环外的 MODAL

Question

我正在开发一个模式，它应该获取用户 ID 和用户的全名以显示在模式的标题上。这些来自 php foreach 循环。我需要获取 ID，因为我要把它存储在另一张桌子上。

所以可以说这是循环

<?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"><i class="fa fa-plus" title="Add PTO"></i> Set up PTO</a>
</td>
<?php }?>

这是我的模态的最小化版本

<div class="modal fade" id="ptoModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalLabel">Set up PTO for <?php echo $users['first_name'] . ' ' . $users['middle_name'] . ' ' . $users['last_name']; ?></h5>
      </div>
      <div class="modal-body">
        <form class="pto" id="pto" name="pto">
          // form goes here...
          <input type="hidden" name="user_id" id="user_id" class="user_id" value="<?php echo $users['id']?>">
          <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>

这就是它的样子

这是调用模态的脚本

$(document).on("click", ".ptoModal", function (e) {
  //get data-id attribute of the clicked element
  var modalid = $(e.relatedTarget).data('id');  
});

最后这是从 MODAL 保存表单的脚本

$('form.pto').submit(function (event) {

  var formData = {
    user_id:  $('#user_id').val(),
    earnedPto:$('#earnedPto').val(),
    earnedSl: $('#earnedSl').val(),
    remarks:  $('#remarks').val(),
    action:   $('#action').val()
  };
  var user_id = $(this).data('user_id');
  $.ajax({
      type: 'POST',
      url: site_url + '/create-user/save.php',
      data: formData,
  })
  event.preventDefault();
});

目前情况： 我可以保存 PTO、病假和备注，但不能保存 user_id。首先，模态被放置在 foreach 循环内，我的新手大脑认为如果模态包含在循环中更有意义。但问题是，我单击模态上显示的变量（标题的全名和隐藏字段的 ID）的每一行都是 foreach 循环第一行的信息。

现在模态框位于循环之外，因为有人建议这样做。

现在，抱歉这么长的介绍，我的问题是，如何在模式中显示员工的全名，并在隐藏字段中显示 ID？

我真的很感谢您提供的任何帮助。

Answer 1

您可以使用单击事件处理程序来设置 id 和名称，只需选择与单击的元素相关的单元格并获取其内容

$(document).on("click", ".ptoModal", function (e) {
  //                   <a>    <td>     <td>  <td>    id
  $('#user_id').val($(this).parent().prev().prev().text());  
  $('#ModalLabel span').text($(this).parent().prev().text());  
});

此外，每次单击模态时更改标题以设置名称。

<h5 class="modal-title" id="ModalLabel">Set up PTO for <span></span></h5>