jquery 如何使用模态对话框 Bootstrap 获取输入表单的值?

nfzehxib  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(224)

当我想从下面的表单输入中检索一个值时,我遇到了问题。你能告诉我一种方法来检索值从输入形式,如果在模态对话框使用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 } ?>
jhdbpxl9

jhdbpxl91#

不要在HTML中使用onclick或任何其他onX事件属性。它们不是好的做法。
此外,如果您使用循环来创建重复内容,请不要将id属性放在该循环内的HTML中。id必须唯一。在这些元素上使用class
现代的方法是不显眼地附加事件,并使用对引发该事件的Element的引用来遍历DOM,以找到您想要从中获取值的相关input
如果您需要知道与PHP循环中的实体相关联的idmaster_id,则可以在HTML中将这些值作为data属性应用。就像这样:

<!-- 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);
});

相关问题