HTML页面存在两个form表单，点击form2的按钮却提交form1的数值如何解决？

问题原因 #

• HTML规范要求id属性全局唯一，你的代码中两个表单的输入框都使用了相同的id text，document.getElementById()查询时只会返回整个文档中第一个匹配的元素，也就是form1里的输入框，所以不管点击哪个表单的提交按钮，读取的都是form1的输入值。

修复方案 #

方案1：修改id为全局唯一，传参区分目标输入框 #

调整后的JS代码：

function chk(textId) {
  var text = document.getElementById(textId).value;
  console.log(text);
  return false;
}

调整后的HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1">
  <input type="text" id="text1" value="Hi">
  <input type="submit" id="submit1" onclick="return chk('text1')">
  <label for="submit1">Hi</label>
</form>

<form id="form2">
  <input type="text" id="text2" value="bonjour">
  <button id="submit2" onclick="return chk('text2')">btn</button>
  <label for="submit2">bonjour</label>
</form>

方案2：通过事件关联所属表单，无需提前指定id #

这种方案扩展性更强，后续新增表单不需要修改核心逻辑，给输入框加通用类名区分即可：
调整后的JS代码：

function chk(e) {
  // 获取触发事件的元素所属的表单
  const currentForm = e.target.closest('form');
  // 在当前表单范围内查找对应输入框
  var text = currentForm.querySelector('.form-text').value;
  console.log(text);
  return false;
}

调整后的HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1">
  <input type="text" class="form-text" value="Hi">
  <input type="submit" id="submit1" onclick="return chk(event)">
  <label for="submit1">Hi</label>
</form>

<form id="form2">
  <input type="text" class="form-text" value="bonjour">
  <button id="submit2" onclick="return chk(event)">btn</button>
  <label for="submit2">bonjour</label>
</form>

内容的提问来源于stack exchange，提问作者lucax979