提交带有多个提交按钮的表单答案

【问题标题】：Submit form with multiple submit buttons提交带有多个提交按钮的表单
【发布时间】：2017-04-12 11:53:05
【问题描述】：

如何使用jQuery在你按下回车的时候提交表单，但是通过点击第二个提交按钮来发送。所以第一次提交被忽略了。

<form method="post" action="">
    <input type="text" name="inp">
    <input type="submit" name="first" value="first">
    <input type="submit" name="second" value="second">
</form>

【问题讨论】：

如果不提交表单，我不知道为什么你会有第一个提交按钮。
据我了解您的问题，情况已经如此。按下回车键，使用第一个按钮。点击第二个，然后第二个被使用/提交
我认为你不需要第一个提交按钮，只需按下时谷歌触发事件键，你会得到一堆东西来阅读stackoverflow.com/questions/18160342/…。
你的意思是当按回车时，应该使用第二个按钮？恕我直言，还不清楚你在问什么
也许你会发现它有帮助：stackoverflow.com/questions/925334/…

标签： javascript jquery html forms

【解决方案1】：

您可以捕捉回车键按下，而不是执行第一个提交按钮操作的默认操作，强制它执行第二个操作。

在文本输入中处理按键操作：

<input type="text" name="inp" onkeypress="return runScript(event)"/>

然后定义你的函数runScript:

func runScript(e) {
    if(e.keyCode == 13) {
        //Submit action goes here
        document.getElementsByName("second")[0].click()
    }
}

【讨论】：

【解决方案2】：

我的理解是，您希望单击任一按钮提交表单，但点击 enter 以使用第二个按钮提交。

这里有几个选项：

1) 更改按钮的显示方式

您可以将第一个按钮移动到标记中的第二个，但可以通过不同的定位来更改它的显示方式。请注意，如果您这样做，您还应该更新 tabIndex。

.firstButton {
  position: absolute;
  width: 80px;
}

.secondButton {
  position: absolute;
  left: 90px;
  width: 80px;
}

<form name="theForm" method="post" action="">
  <input type="text" tabIndex='1' name="inp">
  <div>
    <input type="submit" tabIndex='2' class='secondButton' name="second" value="second">
    <input type="submit" tabIndex='1' class='firstButton' name="first" value="first">     
  </div>
</form>

2) 将第一个按钮改为非提交按钮并手动处理点击

function submitForm() {
  document.theForm.submit();
}

<form name="theForm" method="post" action="">
  <input type="text" name="inp">
  <input type="button" name="first" value="first" onclick="submitForm()">
  <input type="submit" name="second" value="second">
</form>

希望对您有所帮助。

【讨论】：