HTML表单中的多个提交按钮

Let's say you create a Wizard in an HTML form. One button goes back, and one goes forward. Since the back button appears first in the markup when you press Enter it will use that button to submit the form.

假设您在HTML表单中创建了一个向导。一个按钮返回，一个按钮向前。由于后退按钮在您按Enter时首先出现在标记中，它将使用该按钮提交表单。

Example:

例子:

<form>
  <!-- put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>

What I would like to do, is get to decide which button is used to submit the form when a user presses Enter. That way, when you press Enter the Wizard will move to the next page, not the previous. Do you have to use tabindex to do this?

我想做的是，当用户按下Enter时，决定使用哪个按钮提交表单。这样，当您按下Enter时，向导将移动到下一个页面，而不是之前的页面。你需要用tabindex来做这个吗?

23 个解决方案

#1

I hope this helps. I'm just doing the trick of floating the buttons on the right.

我希望这可以帮助。我只是在做一个在右边浮动按钮的技巧。

This way the Prev button is left of the Next button but the Next comes first in the HTML code:

这样，Prev按钮就在下一个按钮的左边，但是下一个按钮首先出现在HTML代码中:

.f {
  float: right;
}
.clr {
  clear: both;
}

<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

Edit: Benefits over other suggestions: no JavaScript, accessible, both buttons remain type="submit"

编辑:优于其他建议:没有JavaScript，可访问，两个按钮保持类型="提交"

#2

Would it be possible for you to change the previous button type into a button like this:

是否可以将之前的按钮类型改为如下按钮:

<input type="button" name="prev" value="Previous Page" />

Now the Next button would be the default, plus you could also add the default attribute to it so that your browser will highlight it like so:

现在下一个按钮是默认的，另外你也可以添加默认属性，这样你的浏览器就会像这样突出显示它:

<input type="submit" name="next" value="Next Page" default />

Hope that helps.

希望有帮助。

#3

Give your submit buttons same name like this:

给你的提交按钮命名如下:

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

When the user presses enter and the Request goes to server, you can check the value for submitButton on your server-side code which contains a collection of form name/value pairs. For example in classic ASP:

当用户按enter并将请求发送到服务器时，您可以检查服务器端代码上的submitButton的值，该代码包含表单名称/值对的集合。例如在经典ASP中:

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If

Reference: Using multiple submit buttons on a single form

引用:在一个表单上使用多个提交按钮。

#4

If the fact that the first button is used by default is consistent across browsers, why not put them the right way round in the source code, then use CSS to switch their apparent positions? float them left and right to switch them around visually, for example.

如果默认使用的第一个按钮在浏览器中是一致的，为什么不在源代码中正确地使用它们，然后使用CSS来切换它们的明显位置呢?浮动它们左右以使它们在视觉上转换。

#5

If you really just want it to work like an install dialog, what about just giving focus to the "Next" button OnLoad. That way if the user hits Return, the form submits and goes forward. If they want to go back they can hit Tab or click on the button.

如果你只是想让它像安装对话框一样工作，那就把焦点放在OnLoad的“Next”按钮上。这样，如果用户点击返回，表单将提交并继续。如果他们想要返回，他们可以按Tab或单击按钮。

#6

It can work with CSS

它可以使用CSS。

Put them in the markup as the next button first, then the previous button next.

先把它们放在标记中作为下一个按钮，然后是上一个按钮。

Then use CSS to position them to appear the way you want

然后使用CSS将它们按您希望的方式显示出来

#7

Sometimes the provided solution by @palotasb is not sufficient. There are use cases where for example a "Filter" submit button is placed above buttons like "Next and Previous". I found a workaround for this: copy the submit button which needs to act as the default submit button in a hidden div and place it inside the form above any other submit button. Technically it will be submitted by a different button when pressing Enter then when clicking on the visible Next button. But since the name and value is the same, there's no difference in the result.

有时@palotasb提供的解决方案是不够的。有一些用例，例如“过滤器”提交按钮被放置在“Next和Previous”按钮之上。我找到了一个解决方案:复制提交按钮，该按钮需要作为隐藏div中的默认提交按钮，并将其放在表单中任何其他提交按钮之上。从技术上讲，当按下Enter键时，它将由一个不同的按钮提交，然后点击可见的Next按钮。但是由于名称和值是相同的，所以结果没有区别。

<html>
<head>
    <style>
        div.defaultsubmitbutton {
            display: none;
        }
    </style>
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        <p><input type="text" name="filter"><input type="submit" value="Filter"></p>
        <p>Filtered results</p>
        <input type="radio" name="choice" value="1">Filtered result 1
        <input type="radio" name="choice" value="2">Filtered result 2
        <input type="radio" name="choice" value="3">Filtered result 3
        <div>                
            <input type="submit" name="prev" value="Prev">
            <input type="submit" name="next" value="Next">
        </div>
    </form>
</body>
</html>

#8

Kevin, this cannot be done with pure HTML. You must rely on JavaScript for this trick.

Kevin，这不能用纯HTML来实现。您必须依靠JavaScript来实现这个技巧。

However, if you place two forms on the HTML page you can do this.

但是，如果在HTML页面上放置两种表单，就可以做到这一点。

Form1 would have the previous button.

Form1将具有先前的按钮。

Form2 would have any user inputs + the next button.

Form2将具有任何用户输入+ next按钮。

When the user presses Enter in Form2, the Next submit button would fire.

当用户按下Form2中的Enter时，下一个submit按钮将启动。

#9

I would use Javascript to submit the form. The function would be triggered by the OnKeyPress event of the form element, and would detect whether the Enter key was selected. If this is the case, it will submit the form.

我将使用Javascript提交表单。该函数将由表单元素的OnKeyPress事件触发，并检测是否选择了Enter键。如果是这样，它将提交表单。

Here are two pages that give techniques on how to do this: 1, 2. Based on these, here is an example of usage (based on here):

这里有两页给出了如何做到这一点的技巧:1、2。基于这些，这里有一个使用的例子(基于这里):

<SCRIPT TYPE="text/javascript"><!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) { 
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />

#10

Kevin,

凯文,

This works without javascript or CSS in most browsers:

这在大多数浏览器中都不需要javascript或CSS:

<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>

Firefox, Opera, Safari, Google Chrome all work.
As always, IE is the problem.

火狐，Opera, Safari，谷歌Chrome都可以。和往常一样，这就是问题所在。

This version works when javascript is turned on:

当打开javascript时，这个版本可以工作:

<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>

So the flaw in this solution is:
Previous Page does not work if you use IE with Javascript off.
Mind you, the back button still works!

所以这个解决方案的缺点是:如果你关闭了Javascript，使用IE，前一页就不能工作。注意，后退按钮仍然可以工作!

#11

If you have multiple active buttons on one page then you can do something like this:

如果你在一个页面上有多个活动按钮，你可以这样做:

Mark the first button you want triggers on Enter keypress as defaultbutton on the form. For the second button associate it to Backspace button on keyboard. Backspace eventcode is 8.

在输入键上标记您想要触发的第一个按钮，并将其标记为表单上的defaultbutton。第二个按钮将它关联到键盘上的Backspace按钮。退格eventcode是8。

$(document).on("keydown", function(event) {
  if (event.which.toString() == "8") {
    var findActiveElementsClosestForm = $(document.activeElement).closest("form");

    if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) {
      $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click");
    }
  }
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<form action="action" method="get" defaultbutton="TriggerOnEnter">
  <input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" />
  <input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" />
</form>

Hope this helps.

希望这个有帮助。

#12

Changing the tab order should be all it takes to accomplish this. Keep it simple.

更改制表符的顺序应该是完成此任务所需的全部内容。保持简单。

Another simple option would be to put the back button after the submit button in the HTML code but float it to the left so it appears on the page before the submit button.

另一个简单的选项是在HTML代码中的submit按钮之后放置back按钮，但将其浮动到左边，以便在submit按钮之前出现在页面上。

#13

Another simple option would be to put the back button after the submit button in the HTML code but float it to the left so it appears on the page before the submit button.

另一个简单的选项是在HTML代码中的submit按钮之后放置back按钮，但将其浮动到左边，以便在submit按钮之前出现在页面上。

Changing the tab order should be all it takes to accomplish this. Keep it simple.

更改制表符的顺序应该是完成此任务所需的全部内容。保持简单。

#14

keep the name of all submit buttons the same -- "prev" The only difference is the value attribute with unique values. When we create the script, these unique values will help us to figure out which of the submit buttons was pressed.

保持所有提交按钮的名称相同——“prev”惟一的区别是值属性具有惟一的值。当我们创建脚本时，这些惟一的值将帮助我们确定按了哪个提交按钮。

And write follwing coding:

和写作方向编码:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

#15

This is what i have tried out: 1. You need to make sure you give your buttons different names 2. Write an if statement that will do the required action if either button in clicked.

这是我试过的方法:1。你需要确保你的按钮有不同的名字2。编写一个if语句，如果单击其中的任何一个按钮，该语句将执行所需的操作。

<form>
<input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

In PHP,

在PHP中,

if(isset($_POST['prev']))
{
header("Location: previous.html");
die();
}

if(isset($_POST['next']))
{
header("Location: next.html");
die();

}

#16

From https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

从https://html.spec.whatwg.org/multipage/forms.html implicit-submission

A form element's default button is the first submit button in tree order whose form owner is that form element.

表单元素的默认按钮是树中的第一个提交按钮，其表单所有者是该表单元素。

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form)...

如果用户代理支持让用户隐式提交表单(例如，在某些平台上按“enter”键，而文本字段则隐式地提交表单)……

Having the next input be type="submit" and changing the previous input to type="button" should give the desired default behavior.

将下一个输入设置为type="submit"，并将前一个输入更改为type="button"，应该会产生预期的默认行为。

<form>
   <input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

   <input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

#17

The first time I came up against this I came up with an onclick()/js hack when choices are not prev/next that I still like for its simplicity. It goes like this:

第一次遇到这个问题时，我想到了onclick()/js hack，当选项不是prev/next时，我仍然喜欢它的简单性。它是这样的:

@model myApp.Models.myModel    

<script type="text/javascript">
    function doOperation(op) {
        document.getElementById("OperationId").innerText = op;
        // you could also use Ajax to reference the element.
    }
</script>

<form>
  <input type="text" id = "TextFieldId" name="TextField" value="" />
  <input type="hidden" id="OperationId" name="Operation" value="" />
  <input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
  <input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>

When either submit button is clicked it stores the desired operation in a hidden field (which is a string field included in the model the form is associated with) and submits the form to the Controller, which does all the deciding. In the Controller, you simply write:

当单击其中一个submit按钮时，它将所需的操作存储在一个隐藏字段(这是一个包含在与表单关联的模型中的字符串字段)中，并将表单提交给控制器，控制器负责所有的决策。在控制器中，您只需写:

// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
     // do read logic
}
else if (myModel.Operation == "Write")
{
     // do write logic
}
else
{
     // do error logic
}

You can also tighten this up slightly using numeric Operation codes to avoid the string parsing, but unless you play with Enums, the code is less readable, modifiable, and self-documenting and the parsing is trivial, anyway.

您还可以使用数字操作代码稍微加强这一点，以避免字符串解析，但是除非您使用枚举，否则代码的可读性、可修改性和自文档化性都较差，而且解析也很简单。

#18

I came across this question when trying to find an answer to basically the same thing, only with asp.net controls, when I figured out that the asp button has a property called UseSubmitBehavior that allows you to set which one does the submitting.

当我发现asp按钮有一个叫做UseSubmitBehavior的属性，允许你设置哪个按钮执行提交时，我就遇到了这个问题。

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

Just in case someone is looking for the asp.net button way to do it.

以防有人在寻找asp.net按钮的方式。

#19

With javascript (here jQuery), you can disable the prev button before submit the form.

使用javascript(这里是jQuery)，您可以在提交表单之前禁用prev按钮。

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});

#20

I solved a very similar problem in this way:

我用这种方法解决了一个非常相似的问题:

1. if javascript is enabled (in most cases nowadays) then all the submit buttons are "degraded" to buttons at page load via javascript (jquery). Click events on the "degraded" button typed buttons are handled also via javascript.

   如果启用了javascript(目前大多数情况下是这样)，那么所有提交按钮都通过javascript (jquery)“降级”到页面加载的按钮。单击“降级”按钮类型按钮上的事件也通过javascript处理。

2. if javascript is not enabled then the form is served to the browser with multiple submit buttons. In this case hitting enter on a textfield within the form will submit the form with the first button instead of the intended default, but at least the form is still usable: you can submit with both the prev and next buttons.

   如果javascript没有启用，那么该表单将被提供给具有多个提交按钮的浏览器。在这种情况下，点击表单内textfield上的enter将会提交带有第一个按钮的表单，而不是预期的默认值，但是至少表单仍然是可用的:您可以同时提交prev和next按钮。

working example:

工作的例子:

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
    <form action="http://httpbin.org/post" method="post">
    If javascript is disabled, then you CAN submit the form with button1, button2 or button3.
    If you press enter on a text field, then the form is submitted with the first submit button.

    If javascript is enabled, then the submit typed buttons without the 'defaultSubmitButton'
    style are converted to button typed buttons.

    If you press enter on a text field, then the form is submitted with the only submit button
    (the one with class defaultSubmitButton)
    If you click on any other button in the form, then the form is submitted with that button's
    value.
    <br />
    <input type="text" name="text1" ></input>
    <button type="submit" name="action" value="button1" >button 1</button>
    <br />
    <input type="text" name="text2" ></input>
    <button type="submit" name="action" value="button2" >button 2</button>
    <br />
    <input type="text" name="text3" ></input>
    <button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button>
    </form>
    <script>
    $(document).ready(function(){

    /* change submit typed buttons without the 'defaultSubmitButton' style to button typed buttons */
    $('form button[type=submit]').not('.defaultSubmitButton').each(function(){
        $(this).attr('type', 'button');
    });

    /* clicking on button typed buttons results in:
       1. setting the form's submit button's value to the clicked button's value,
       2. clicking on the form's submit button */
    $('form button[type=button]').click(function( event ){
        var form = event.target.closest('form');
        var submit = $("button[type='submit']",form).first();
        submit.val(event.target.value);
        submit.click();
    });

    });
    </script>
    </body>
    </html>

#21

Try this..!

试试这个……!

<form>
  <input type="text" name="Name" />
  <!-- Enter the value -->

  <input type="button" name="prev" value="Previous Page" />
  <!-- This is the button that will submit -->
  <input type="submit" name="next" value="Next Page" />
  <!-- But this is the button that I WANT to submit -->
</form>

#22

You can use Tabindex to solve this issue, Also changing the order of button would be more efficient way to achieve this. Change the order of button and add float values to assign them the desired position you want to show in your HTML view.

您可以使用Tabindex来解决这个问题，也可以通过改变按钮的顺序来实现这一点。更改按钮的顺序，并添加浮点值，以便在HTML视图中指定所需的位置。

#23

Using the example you gave:

使用你给出的例子:

<form>
<input type="text" name="field1" /><!-- put your cursor in this field and press Enter -->
<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

If you click on "Previous Page" only the value of "prev" will be submitted. If you click on "Next Page" only the value of "next" will be submitted.

如果单击“上一页”，则只会提交“prev”的值。如果单击“下一页”，则只提交“下一页”的值。

If however, you press enter somewhere on the form, neither "prev" nor "next" will be submitted.

但是，如果您在表单上按enter键，则不会提交“prev”或“next”。

So using pseudo code you could do the following:

使用伪代码你可以做以下事情:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click