javascript - 如何将变量传递给 bootstrap 模式表单并运行 mysql 查询

Question

我有一个页面包含两个表:客户和车站。 SQL 查询用数据填充这些表。我在表格的每一行定义了一个按钮来打开模式编辑表单。对于客户:

<table id = "admin_table_customers"  class="table rtl table-sm table-dark table-hover">
  <tr>
    <th>customer_id</th>
    <th>name</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
  </tr>
  <?php foreach($query_customers as $customer) { ?>
    <tr>
      <td><?php echo h($customer['CUSTOMER_ID']) ?></td>
      <td><?php echo h($customer['CUSTOMER_NAME']) ?></td>
      <td><button type="button" id="button_edit_customer" class="btn btn-primary feed-id" data-toggle="modal" data-target="#edit_customer" data-id="<?php echo h(u($customer['CUSTOMER_ID'])) ?>">edit</button></td>
      <td><button type="button" id="button_delete_customer" class="btn btn-primary feed-id" data-toggle="modal" data-target="#delete_customer" data-id="<?php echo h(u($customer['CUSTOMER_ID'])) ?>">delete</button></td>
    </tr>
  <?php } ?>
</table>

当我检查 chrome 中的源代码时，一切(id 和 data-id)看起来都很好。我使用此脚本来检查是否将正确的值传递给模态形式。

$(document).ready(function () {
  $("#button_edit_station").click(function(evt){
    alert($(this).attr("id"));
    alert($(this).data('id'));
  });
  $("#button_edit_customer").click(function(evt){
    alert($(this).attr("id"));
    alert($(this).data('id'));
  });
});

第一个问题:每个表格第一行的按钮显示正确的值，但其他按钮不显示对话框。
我想将每个表的 ID 传递给模态表单并执行查询来填写表单。我想我可以设法将 ID 传递给模式，但是我应该如何以及何时执行查询来填写表单？
这是我的表格:

<div id="edit_customer" class="modal fade" role="dialog" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header rtl">
        <h4 class="modal-title">edit customer</h4>
      </div>
      <div class="modal-body rtl">
        <form id = "admin_form_edit_customer" action = "" method = "post">
          <div class="md-form mb-5">
            <input type="text" id = "form_edit_customer_id" class="form-control validate">
            <label data-error="wrong" data-success="right" for="form_edit_customer_id">customer_id</label>
          </div>
          <div class="md-form mb-5">
            <input type="text" id = "form_edit_customer_name" class="form-control validate">
            <label data-error="wrong" data-success="right" for="form_edit_customer_name">name</label>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">save</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
      </div>
    </div>
  </div>
</div>

Answer 1

按照以下步骤操作

1. 在按钮点击事件“edit_modal(id,name)”上调用函数
2. 在您的页面上编写一个函数

函数edit_modal(id,名称){

// assign value in modal form
$('#form_edit_customer_id').val(id);
$('#form_edit_customer_name').val(name);

//Display modal
$('#edit_customer').modal('show');

}