具有onsubmit功能的同一表单上的多个提交按钮

multiple submit buttons on same form with onsubmit function

本文关键字：提交 按钮 onsubmit 功能 具有 表单      更新时间：2023-09-26

我的表单中有3个sumbit按钮，我需要根据它点击的按钮进行不同的3个操作。所以我需要编写javascript函数来做同样的事情。如何在javascript中了解单击了哪个按钮。

Javascript：

<script type="text/javascript" language="javascript">
function submitform(){
    //do something
}

HTML:

form name="myform" method="get,post" onsubmit="return submitform();"
input type="submit" name="submit" value="Home"
input type="submit" name="submit" value="Reschedule"
input type="submit" name="submit" value="Cancel"

如有任何帮助，将不胜感激

编辑：

你也可以有一个隐藏的输入，告诉你按下了哪个按钮，然后在服务器上处理它。当点击一个按钮时，它会在提交之前更改输入。

<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='forward';return true;" id="linkName" value="Forward" />
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='back';return true;" id="back" value="Back" />

演示：http://jsfiddle.net/Homeliss/vperb/

注意：演示使用jquery来显示消息，而不是发布表单，但这只是用于演示目的。解决方案是简单的javascript

在现代浏览器中，您可以使用SubmitEvent的submitter属性。

function submitForm(submitType)
{
    switch (submitType)
    {
        case 'Submit 1':
            console.log('Submit 1');
            break;
        case 'Submit 2':
            console.log('Submit 2');
            break;
    }
    return false;
}
<form onsubmit="return submitForm(event.submitter.value)">
  Name: <input name="name" required /><br />
  <div>
    <input type="submit" value="Submit 1" />
    <button type="submit" value="Submit 2">Submit 2</button>
  </div>
</form>

如果您可以使用jQuery，那么这会容易得多。

然而，一种解决方案是从表单中删除submitform（），并将其添加到每个提交按钮的onclick事件中。通过这种方式，您可以更改它来传递一个参数，表示哪个按钮调用了它

祝你好运。

我们可以在html页面中提交一次表单。所以我们在一个表单中只使用一个提交按钮。但要调用更多函数，我们可以使用onClick事件，输入类型应该是按钮。

我有个问题。你的表格里还有其他的输入栏吗？如果有另一个字段，如文本字段，当我们在文本字段内按Enter键时，会调用哪些按钮操作？

我的建议是：

<form name="myform" method="get,post" onsubmit="return false;">
    <input type="button" value="Home" onclick="submitform(1)" />
    <input type="button" value="Reschedule" onclick="submitform(2)" />
    <input type="button" value="Cancel" onclick="submitform(3)" />
</form>

在这段代码中，用户必须单击一个按钮来提交表单，按下回车键将不会导致执行任何操作。

相关文章：