javascript - 如何使用模式对话框 Bootstrap 获取输入表单的值？

Question

当我想从以下表单输入中检索值时遇到问题。您能告诉我一种在模式对话框中使用 onclick 事件从输入表单检索值的方法吗？

function add_rute(x, y) {
  var hari = $("input[name=hari]").val();
  var rute = $("input[name=rute]").val();
  console.log(hari);
}

<?php
  $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">day </label>
                <input type="text" class="form-control" id="hari" name="hari" placeholder="Select Day">
              </div>
              <div class="col">
                <label for="rutet">Rute</label>
                <input type="text" class="form-control" id="rute" 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>
          <button type="button" class="btn btn-success btn-sm" onclick="add_rute(<?php echo $row['id'] ?>,<?php echo $row['master_id'] ?>)">Submit</button>
        </div>
      </div>
    </div>
  </div>
<?php } ?>

Answer 1

请勿在 HTML 中使用 onclick 或任何其他 onX 事件属性。它们不是好的做法。

此外，如果您使用循环创建重复内容，请勿将 id 属性放入该循环内的 HTML 中。 id 必须是唯一的。而是在这些元素上使用class。

执行您所需操作的现代方法是不显眼地附加事件，并使用对引发该事件的元素的引用来遍历 DOM 以查找您想要获取值的相关输入来自。

如果您需要知道与 PHP 循环中的实体关联的 id 和 master_id，那么您可以将这些值应用为 data HTML 中的属性。像这样的事情:

<!-- within the PHP loop: -->
<div class="modal-footer">
  <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
  <button type="button" class="btn btn-success btn-sm" data-id="<?php echo $row['id'] ?>" data-master-id="<?php echo $row['master_id'] ?>">Submit</button>
</div>

$('.submit').on('click', e => {
  const $button = $(e.target);
  const $modalBody = $button.closest('.modal-footer').prev('.modal-body');
  const id = $button.data('id');
  const masterId = $button.data('master-id');
  const hari = $modalBody.find('.hari').val();
  const rute = $modalBody.find('.rute').val();

  // work with the values here:
  console.log(id, masterId, hari, rute);
});