如何在Bootstrap模态框中获取表单输入框的值？

问题原因 #

你当前的代码在循环生成多个模态框时，所有输入框的name和id都是重复的（比如都叫hari、rute）。使用$("input[name=hari]").val()这种全局选择器时，jQuery只会返回第一个匹配到的元素，无法精准获取当前打开的模态框内的输入值。

解决方案 #

通过点击按钮的上下文，定位到它所属的模态框，再在该模态框范围内查找输入框，就能拿到正确的值。

1. 修改HTML中的按钮点击事件

给onclick传入当前按钮对象this，作为定位模态框的依据：

<button type="button" class="btn btn-success btn-sm" onclick="add_rute(this, <?php echo $row['id'] ?>, <?php echo $row['master_id'] ?>)">Submit</button>

2. 调整JavaScript函数逻辑

利用传入的按钮对象，通过closest()方法找到所属的模态框，再用find()在模态框内部查找输入框：

function add_rute(btn, x, y) {
  // 定位当前按钮所属的模态框
  var currentModal = $(btn).closest('.modal');
  // 在模态框范围内获取输入值
  var hari = currentModal.find("input[name=hari]").val();
  var rute = currentModal.find("input[name=rute]").val();
  console.log(hari, rute);
}

额外优化建议 #

为了避免重复id带来的HTML规范冲突问题，可以给每个模态框内的输入框设置唯一id，比如：

<input type="text" class="form-control" id="hari_<?php echo $row['id'] ?>" name="hari" placeholder="Select Day">
<input type="text" class="form-control" id="rute_<?php echo $row['id'] ?>" name="rute" placeholder="rute">

不过只要通过模态框上下文定位输入框，这一步不是必须的。

内容的提问来源于stack exchange，提问作者Performa Tour And Travel