使用 jquery 在模态中获取隐藏值

Question

在Jquery

    $(document).ready(function () { 
      $("#employeeInfo").on('click',function() {
             employee_info = $(this).closest("tr");
             emp_id = employee_info.find("#emp_id");
             modal_emp_id = $("#modal_emp_id");
             modal_emp_id.val(emp_id.val());
         });
    });

在HTML


    <tr>
      <td data-toggle='modal' data-target='#editEmployeeInfo' id='employeeInfo'>
        <input type="hidden" id="emp_id" name="emp_id" value="<?php $row["emp_id"] ?>"></input>
        <?php echo $row["name"]; ?>
      </td>
      <td><?php echo $row["department"]; ?></td>
    </tr>

     <div id='editEmployeeInfo' class='modal fade' role='dialog' aria-hidden='true' tabindex='-1'>
       <div class='modal-dialog'>
         <div class='modal-content'>
           <div class='modal-header'>
             <button type='button' class='close' data-dismiss='modal'>&times;</button>
               <h4 class='modal-title'>Edit Employee Info</h4>
           </div>
               <div class='modal-body'>
               <input type="hidden" id="modal_emp_id" name="modal_emp_id"></input>
              </div>
           </div>
         </div>
       </div>
     </div>

点击员工姓名时，弹窗。

我想使用 Jquery 获取所选员工的 emp_id。

以上是我试过的

你知道如何获取jquery中的隐藏值吗？

Answer 1

您需要将 table 行中的 ID 更改为类，并将选择器更改为使用 . 而不是 #。

在下面的代码片段中，我已将模式中的隐藏输入更改为文本输入，因此您可以看到它在您单击名称时得到更新。

$(document).ready(function() {
  $(".employeeInfo").on('click', function() {
    employee_info = $(this).closest("tr");
    emp_id = employee_info.find(".emp_id");
    modal_emp_id = $("#modal_emp_id");
    modal_emp_id.val(emp_id.val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-toggle='modal' data-target='#editEmployeeInfo' class='employeeInfo'>
      <input type="hidden" class="emp_id" name="emp_id" value="123456"></input>
      John Smith
    </td>
    <td>
      Engineering
    </td>
  </tr>
</table>

<div id='editEmployeeInfo' class='modal fade' role='dialog' aria-hidden='true' tabindex='-1'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal'>&times;</button>
        <h4 class='modal-title'>Edit Employee Info</h4>
      </div>
      <div class='modal-body'>
        <input type="text" id="modal_emp_id" name="modal_emp_id"></input>
      </div>
    </div>
  </div>
</div>
</div>

使用 jquery 在模态中获取隐藏值

Getting hidden value in modal using jquery

jquery

bootstrap-modal