我的按钮不发送她的表格而是另一种表格

Question

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

  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>

Answer 1

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

Answer 2

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>

我的按钮不发送她的表格而是另一种表格

My button doesn't send her form but another form

html

javascript

forms

ajax

input