Question

我在一页上有2个表格。

表格1

<form id="form1" method="get" action="action1.php">
  <input type="text" id="input1">
</form>

此表单的提交者：

$('#input1').on('keydown', function(e) {
  if (e.keyCode == 13) {
    $('#form1').submit();
  }
});

因为我不想在此表单上提交按钮。

第二种形式：

<form id="form2" method="post" action="action2.php">
  <input type="text" id="input2">
  <button type="submit">Save</button>
</form>

现在，如果我按第二个表单上的按钮，它将提交第一个表单。不确定为什么会发生这种情况，因为“提交”按钮位于第二个<form>标记内。

也；因为表单1将会出现在许多页面上（这是导航栏中的搜索栏），所以我想对此进行“未来的证明”，以便将来在页面上放置多个表单时不会遇到问题。理想情况下，这意味着通过更改表格1可以解决此问题。

更新

愚蠢的错误...！我在代码中其他地方的$('form:first').submit();上有<button type="submit">Save</button>，所以提交了第一个表格...

Answer 1

还有其他事情发生。

尝试在这两个字段中按Enter-您将看到不需要脚本

$("form").on("submit",function(e) {
  e.preventDefault();
  console.log(this.id + " submitted");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" method="get" action="action1.php">
  <input type="text" id="input1"> Submits on enter
</form>
<hr/>
<form id="form2" method="post" action="action2.php">
  <input type="text" id="input2"> Submits on enter or on click
  <button type="submit">Save</button>
</form>

Answer 2

以表格2进行更改

<form id="form1" method="get" action="action1.php">
  <input type="text" id="input1">
</form>
    
<form id="form2" method="post" action="action2.php">
  <input type="text" id="input2">
  <button type="submit" form="form2">Save</button>
</form>

read this to know more about form attribute

第二表单的按钮提交没有提交按钮的第一表单

2 个答案: