利用Bootstrap模态框获取表单输入值的现代实践指南

<?php
  // 假设 $con 是您的数据库连接
  $query = "SELECT * FROM LTSUB_itin ORDER BY id ASC";
  $rs = mysqli_query($con, $query);
  while ($row = mysqli_fetch_array($rs)) {
?>
  <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#exampleModal<?php echo $row['id']  ?>">
    <i class="far fa-calendar-plus"></i>
  </button>

  <div class="modal fade" id="exampleModal<?php echo $row['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">ADD DAY ID :
            <?php echo  $row['id'] ?>
          </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="row">
              <div class="col">
                <label for="hari_<?php echo $row['id']; ?>">Day</label>
                <!-- 注意：为确保辅助功能和唯一性，id仍可使用动态值，但更推荐使用class进行JS选择 -->
                <input type="text" class="form-control hari-input" id="hari_<?php echo $row['id']; ?>" name="hari" placeholder="Select Day">
              </div>
              <div class="col">
                <label for="rute_<?php echo $row['id']; ?>">Rute</label>
                <input type="text" class="form-control rute-input" id="rute_<?php echo $row['id']; ?>" name="rute" placeholder="Rute">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
          <!-- 移除 onclick，添加 class 和 data-* 属性 -->
          <button type="button" class="btn btn-success btn-sm submit-rute-btn"
                  data-id="<?php echo $row['id'] ?>"
                  data-master-id="<?php echo $row['master_id'] ?>">Submit</button>
        </div>
      </div>
    </div>
  </div>
<?php } ?>

$(document).ready(function() {
  // 使用事件委托绑定点击事件，可以处理动态生成的按钮
  // 或者直接绑定到 .submit-rute-btn 如果它们是页面加载时就存在的
  $('.submit-rute-btn').on('click', function(e) {
    const $button = $(e.target); // 获取被点击的按钮

    // 1. 获取 data-* 属性值
    const id = $button.data('id');
    const masterId = $button.data('master-id');

    // 2. 向上遍历DOM，找到最近的模态框主体 (modal-body)
    // 从按钮 -> modal-footer -> modal-body
    const $modalBody = $button.closest('.modal-footer').prev('.modal-body');

    // 3. 在当前模态框主体内查找输入字段并获取其值
    const hari = $modalBody.find('.hari-input').val();
    const rute = $modalBody.find('.rute-input').val();

    // 现在您可以使用这些值进行后续操作（例如，通过AJAX发送到服务器）
    console.log('ID:', id);
    console.log('Master ID:', masterId);
    console.log('Hari:', hari);
    console.log('Rute:', rute);

    // 示例：关闭模态框
    $button.closest('.modal').modal('hide');
  });
});