HTML表单中的多个提交按钮


263

假设您以HTML表单创建向导。一键向后退,一键向前。由于当您按下时,后退按钮首先出现在标记中Enter,它将使用该按钮提交表单。

例:

<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>

我想确定当用户按下时使用哪个按钮提交表单Enter。这样,当您按下Enter向导时,将移至下一页,而不是上一页。您是否必须使用tabindex此功能?

Answers:


142

我希望这有帮助。我只是在float按右边的按钮。

这样,Prev按钮位于按钮的左侧Next,但Next在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>

与其他建议相比的好处:没有JavaScript代码,无法访问,并且两个按钮都保留type="submit"


23
请不要在不更改选项卡顺序的情况下执行此操作,以使按下选项卡按钮将在屏幕上显示的各个按钮之间循环。
史蒂夫

61

将以前的按钮类型更改为这样的按钮:

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

现在,“ 下一步”按钮将成为默认按钮,此外,您还可以default向其中添加属性,以便浏览器将其突出显示,如下所示:

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

39
default您在说什么属性?没有有效的“默认”属性:w3.org/html/wg/drafts/html/master/…(在HTML5,HTML 4.01 Transitional / Strict,XHTML 1.0 Strict中不适用)。我不明白为什么更改输入类型submitbutton会更好。您可以以一种形式拥有多个提交类型输入元素,而不会出现问题。我真的不明白为什么这个答案如此之高。
Sk8erPeter

3
输入类型为“按钮”的按钮不会执行表单操作。您可以进行onclick或其他操作,从而执行“默认”表单操作(通过按“提交”类型的按钮执行)以外的其他功能。那就是我一直在寻找的东西,这就是为什么我支持它。不能说“默认”属性,这不是我的问题;)不过,感谢您的澄清。
乔纳斯(Jonas)2014年

2
@ Sk8erPeter,@Jonas ....嗯..我怀疑这个default属性是Global属性;枚举属性..与枚举状态有关:w3.org/html/wg/drafts/html/master/…。除此之外,此答案的按钮方面不是答案。它是“ 有条件的建议 ”或查询(问题本身)。
布雷特·卡斯韦

3
@Jonas:是的,type="button"不提交表单,type="submit"但是提交,但是更改这些按钮的类型绝对不是解决方案,因为这些按钮的行为基本上应该是相同的-OP的问题是如何使“ Next”按钮成为默认为按Enter键。在公认的答案中可能有解决方案。
Sk8erPeter

4
@BrettCaswell:更改这些按钮的类型是一个不好的解决方法(请参阅我以前的评论)。HTML中没有有效defaultinput标签属性(如我之前所述),(流行的)浏览器不会突出显示具有该属性的按钮,这意味着该属性没有非标准实现-因此我仍然不知道@Wally Lawless在说什么,以及为什么这个答案被高估了。只有一个有效default的HTML5引入了属性,但只适用于<track>标签:developer.mozilla.org/en-US/docs/Web/HTML/Element/track
Sk8erPeter

56

为您的提交按钮命名,如下所示:

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

当用户按下Enter并将请求发送到服务器时,您可以submitButton在服务器端代码中检查其中包含表单name/value对集合的值。例如,在ASP Classic中

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

参考:在单个表单上使用多个提交按钮


26
这不是用户要求的。用户想知道如何控制按下Enter键时激活表单中的哪个提交按钮。这是默认按钮。
kosoant

20
在您甚至不知道按钮标签的I18n应用程序中都不起作用。
克里斯,2010年

在哪种系统或技术解决方案中,服务器本身将不知道用于下一个和后退按钮的标签是什么?服务器没有首先生成下一个和后退按钮吗?(如果本地化是在客户端进行的,我想服务器可能不知道,但是我从未听说过HTML)
Jacob

这个答案完全错过了问题,可能是另一个问题。为什么这么多投票???更不用说永远不要检查按钮的标签……这带来了很多麻烦。即使是简单的情况:“我们应将字符串缩写为'Prev。Page'”都会破坏您的网站功能。
Tylla

30

如果默认情况下使用第一个按钮的事实在浏览器之间是一致的,则在源代码中以正确的方式放置它们,然后使用CSS切换它们的明显位置。

float 例如,它们可以左右移动以在视觉上切换它们。


18

有时@palotasb提供的解决方案是不够的。在某些情况下,例如,“过滤器”提交按钮位于“下一个和上一个”之类的按钮上方。我为此找到了一种解决方法:在一个隐藏的div中复制需要用作默认提交按钮的提交按钮,并将其放在表单中任何其他提交按钮上方。从技术上讲,与按可见的“下一个”按钮时相比,按“ Enter”时将通过不同的按钮提交。但是由于名称和值相同,因此结果没有差异。

<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>

17

我将使用JavaScript提交表单。该函数将由form元素的OnKeyPress事件触发,并将检测是否Enter选择了键。如果是这种情况,它将提交表格。

这里有两个页面,就如何做到这一点技巧:12。在此基础上,这里是使用(基于的例子在这里):

<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)" />

2
如果禁用javascript会怎样?
乔恩·温斯坦利

2
您不应该使用<!-和->注释掉JS,这些标记不是Java语言标记
Marecky 2013年

2
@Marecky他们没有评论JS。在支持<script>的浏览器中解析<script>的内容时,将忽略它们。今天,实际上并不需要它们。但是在非常古老的浏览器中,这是一个兼容性漏洞,可以避免将脚本打印为纯文本。
leemes 2013年

17

如果您真的只是希望它像安装对话框一样工作,则只需将焦点放在“下一步”按钮OnLoad上即可。

这样,如果用户点击Return,则表单将提交并继续前进。如果他们想返回,可以点击Tab或单击按钮。


2
他们表示有人在文本字段中填写表格并点击回车。
Jordan Reiter 2013年

17

纯HTML不能做到这一点。您必须依靠JavaScript才能实现此技巧。

但是,如果在HTML页面上放置两个表单,则可以执行此操作。

Form1将具有上一个按钮。

Form2将具有任何用户输入+下一个按钮。

当用户按下EnterForm2时,将触发“下一步提交”按钮。


16

您可以使用CSS来实现。

首先将按钮放入标记中Next,然后再将Prev按钮放置。

然后使用CSS定位它们,使其以您想要的方式显示。


14

在大多数浏览器中,此功能无需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均可使用。
与往常一样,Internet Explorer就是问题所在。

启用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>

因此,此解决方案的缺陷是:

如果您在关闭JavaScript的情况下使用Internet Explorer,则“前一页”不起作用。

请注意,后退按钮仍然有效!


1
没有javascript,您将无法激活“上一页”按钮,因为type =“ button”!
riskop '18年

您的建议的问题在于,按钮type =“ button”不会发布该表单,因此它基本上不起作用,而带有锚点的第二个版本将创建GET而不是POST。
Tylla

12

如果一页上有多个活动按钮,则可以执行以下操作:

将要在Enter按键上触发的第一个按钮标记为表单上的默认按钮。对于第二个按钮,将其Backspace与键盘上的按钮关联。该BackspaceEVENTCODE是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>


11

更改制表符顺序应该是完成此操作的全部方法。把事情简单化。

另一个简单的选择是将后退按钮放在HTML代码中的“提交”按钮之后,但将其向左浮动,使其在页面上出现在“提交”按钮之前。


10
<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page"> 

保持所有提交按钮的名称相同-“ prev”。

唯一的区别是value具有唯一值的属性。创建脚本时,这些唯一值将帮助我们确定按下了哪个提交按钮。

并编写以下代码:

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

问题在于,在文本字段上按Enter键将使用第一个提交按钮而不是使用预期的按钮(在示例中为第二个)提交表单。找出哪个提交按钮用于提交表单很容易,这不是问题!
riskop '18年

为什么name="perv"
彼得·莫滕森

10

另一个简单的选择是将后退按钮放在HTML代码中的“提交”按钮之后,但将其浮动到左侧,以便它出现在页面上的“提交”按钮之前。

更改制表符顺序应该是完成此操作的全部方法。把事情简单化。


10

第一次遇到此问题时,我想到了onclick()/ JavaScript hack,因为它的简单性不是我喜欢的上一个/下一个选择。它是这样的:

@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>

单击任一“提交”按钮时,它将所需的操作存储在隐藏字段(这是与表单关联的模型中包含的字符串字段)中,并将表单提交给控制器,由控制器进行所有决定。在Controller中,您只需编写:

// 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
}

您也可以使用数字操作代码略微加强此功能,以避免字符串解析,但是除非您使用枚举,否则代码的可读性,可修改性和自文档性较低,并且无论如何解析都是微不足道的。


9

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

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

如果用户代理支持让用户隐式提交表单(例如,在某些平台上,当文本字段被隐式聚焦时,按下“ enter”键将提交表单)...

将下一个输入设为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>

9

这是我尝试过的:

  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>

在PHP中,

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

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

问题在于,在文本字段上按Enter键将使用第一个提交按钮而不是使用预期的按钮(在示例中为第二个)提交表单。找出哪个提交按钮用于提交表单很容易,这不是问题!
riskop '18年

7

当我发现ASP按钮具有一个名为的属性UseSubmitBehavior,该属性允许您设置要提交的内容时,仅在ASP.NET控件中尝试找到基本相同的内容时,就遇到了这个问题。

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

以防万一有人在寻找使用ASP.NET按钮的方法。


6

使用JavaScript(此处为jQuery),您可以在提交表单之前禁用prev按钮。

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

1

试试这个..!

<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>


1

我以这种方式解决了一个非常类似的问题:

  1. 如果启用了JavaScript(在当今大多数情况下),则所有提交按钮都将通过JavaScript(jQuery)在页面加载时“ 降级 ”为按钮。也可以通过JavaScript处理“ 降级 ”按钮类型按钮上的单击事件。

  2. 如果未启用JavaScript,则使用多个提交按钮将表单提供给浏览器。在这种情况下,打Enter在一个textfield表单内将提交表单与第一按钮,而不是预期的默认,但至少在形式仍然是可用的:你可以用两种提交上一个下一个按钮。

工作示例:

<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>


0

您可以Tabindex用来解决此问题。同样,更改按钮的顺序将是更有效的方法。

更改按钮的顺序并添加float值以将它们分配给想要在HTML视图中显示的所需位置。


-4

使用您给出的示例:

<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>

如果单击“上一页”,则只会提交“上一页”的值。如果单击“下一页”,则仅会提交“下一个”的值。

但是,如果您Enter在表格的某处按,则“ prev”和“ next”都不会提交。

因此,使用伪代码可以执行以下操作:

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

1
没有任何情况(不使用js)不会触发任何按钮。如果您按ENTER键,则代码中的第一个按钮将捕获该事件。在html-example中,它是prev-button。
SimonSimCity 2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.