我的按钮不发送她的表格，而是另一个表格答案

【问题标题】：My button doesn't send her form but another form我的按钮不发送她的表格，而是另一个表格
【发布时间】：2021-12-18 01:52:08
【问题描述】：

我的html代码中有2个表单，但是当我按下form2的按钮时，会发送form1的值

  function chk() {
    var text = document.getElementById('text').value;
    console.log(text);

    return false;
  }

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

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

【问题讨论】：

你想达到什么目的？单击该按钮调用一个函数，该函数读取并打印第一个表单中的输入值。如果您只想提交表单，请创建“提交”类型的按钮。

标签： javascript html ajax forms input

【解决方案1】：

ID 在页面上应该是唯一的。您可以使用 name 代替输入元素。

function chk(formId) {
  var text = document.getElementById(formId).querySelector('input[name=text]').value;
  console.log(text);
  return false;
}

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

【讨论】：

@lucax979 很高兴为您提供帮助。

【解决方案2】：

id“text”在您的代码中使用了两次，这可能会导致混淆，您应该尝试将其更改为“text1”和“text2” 并在你的函数中使用你需要的那个。

【讨论】：

其实不是“导致混乱”而是错误的。 ID 必须是唯一的。在这些情况下，最好的方法是考虑第一个具有 dup id 的元素，而忽略其他元素