HTML表单中的多个提交按钮

假设您在HTML表单中创建向导。一个按钮返回,一个按钮向前。由于 back 按钮在按下Enter时会首先出现在标记中,因此将使用该按钮来提交表单。

例:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

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

0
额外 编辑
意见: 17

22 答案

是否有可能将上一个按钮类型更改为如下所示的按钮:

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

现在Next按钮将成为默认值,另外您还可以向其添加默认属性,以便您的浏览器像下面这样突出显示它:

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

希望有所帮助。

0
额外
@BrettCaswell:改变这些按钮的类型是一个不好的解决方法(请参阅我以前的评论)。在HTML中, input 标记没有有效的默认属性(如前所述),并且(流行)浏览器不会突出显示具有此属性的按钮,这意味着这个属性没有非标准的实现 - 所以我仍然不知道@Wally Lawless在谈论什么,以及为什么这个答案被高估了。 HTML5中只引入了一个有效的默认属性,但仅用于 <track> 标记: developer.mozilla.org/en-US/docs/Web/HTML/Element/track
额外 作者 Sk8erPeter,
@Jonas:是的, type =“button”不提交表单, type =“submit”的确如此,但改变这些按钮的类型绝对不是一种解决方案,因为这些按钮的行为基本相同 - OP的问题是如何使“Next”按钮成为按Enter键的默认值。在接受的答案中有一个可能的解决方案。
额外 作者 Sk8erPeter,
你在谈论什么 default 属性?没有“默认”属性,它是有效的: w3.org/html/wg/drafts/html/master/… (不在HTML5中,HTML 4.01 Transitional / Strict,XHTML 1.0 Strict)。我不明白为什么将输入类型从 submit 更改为按钮会更好。您可以在一个表单中使用多个提交类型输入元素,而不会出现问题。我不明白为什么这个答案如此有效。
额外 作者 Sk8erPeter,
没关系..我刚刚意识到他实际上是在这个答案中提供了一种解决方法。将第一个输入转换为一个按钮,以便第二个输入在按下回车键时引发它的单击事件...尽管...仍然有条件
额外 作者 Brett Caswell,
@ Sk8erPeter,@Jonas ....嗯..我怀疑这个默认属性是一个全局属性;枚举属性..它与枚举状态有关: w3.org/html/wg/drafts/html/master/… 。除此之外,此答案的按钮方面不是答案..它是'条件性建议'或查询(问题本身)。
额外 作者 Brett Caswell,
输入“按钮”类型不会执行表单操作。你可以有一个onclick或者什么东西,从而执行另一个函数,而不是“默认”表单动作(通过按下“submit”-type按钮来执行)。这就是我一直在寻找的,这就是为什么我喜欢它。不能说为“默认”属性,不是我的问题的一部分;)感谢您的澄清,虽然。
额外 作者 Jonas,

给你的提交按钮相同的名字是这样的:

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

当用户按下Enter键并将 Request 发送到服务器时,可以在服务器端代码中检查 submitButton 的值,该代码包含 name /值对。例如在传统的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

0
额外
这不是用户所要求的。用户想要知道如何控制在按下输入时激活表单中的哪个提交按钮,即,这是默认按钮。
额外 作者 kosoant,
在I18n应用程序中不起作用,您甚至不知道按钮的标签。
额外 作者 Chris,

如果默认情况下第一个按钮在浏览器中是一致的,为什么不把它们放在源代码中,然后使用CSS切换它们的明显位置?例如, float 它们可以左右切换视觉效果。

0
额外

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

以下是两个页面,介绍如何执行此操作的技巧: 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)" />
0
额外
如果JavaScript被禁用会发生什么?
额外 作者 Jon Winstanley,
@Marecky他们不会评论JS。在支持<script>的浏览器中解析<script>的内容时忽略它们。今天,他们真的不需要。但在非常古老的浏览器中,这是一种兼容性破解,以避免将脚本打印为纯文本。
额外 作者 leemes,
你不应该使用<�! - 和 - >来注释JS,这些标签不是Javascript语言标记
额外 作者 Marecky,

使用你给出的例子:

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

如果您点击“上一页”,则只会提交“prev”的值。如果您点击“下一页”,则只会提交“下一页”的值。

但是,如果您按下表格上的某个位置,则不会提交“prev”和“next”。

所以使用伪代码你可以做到以下几点:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
0
额外
当没有任何按钮被触发时,永远不会有情况(不使用js)。如果您按下ENTER键,代码中的第一个按钮将捕获该事件。在html例子中,它是prev按钮。
额外 作者 SimonSimCity,

它可以使用CSS

将它们放入标记中,作为下一个按钮,然后是上一个按钮。

然后使用CSS将它们定位为您想要的样子

0
额外

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

<html>
<head>
    
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        
<input type="text" name="filter"><input type="submit" value="Filter">
Filtered results <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>
0
额外

当我试图找到基本上相同的东西的答案时,我遇到了这个问题,只有在使用asp.net控件时,我发现asp按钮有一个名为 UseSubmitBehavior 的属性,它允许您设置一个人提交。


以防万一有人正在寻找asp.net按钮的方式来做到这一点。

0
额外

凯文,这不能用纯HTML完成。这个技巧你必须依靠JavaScript。

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

Form1将具有上一个按钮。

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

当用户在Form2中按 Enter 时,下一个提交按钮会触发。

0
额外

如果你真的只想让它像安装对话框那样工作,那么只需将焦点放在“下一步”按钮OnLoad上即可。这样,如果用户点击返回,表单提交并继续前进。如果他们想回去,他们可以点击Tab或点击按钮。

0
额外
他们的意思是有人填写表格并在文本字段中返回。
额外 作者 Jordan Reiter,

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

通过这种方式,“Prev”按钮位于“Next”按钮的左侧,但“Next”位于HTML代码的第一位:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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>
</div> </div>

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

0
额外
请不要在不改变标签顺序的情况下进行此操作,以便按下标签按钮将在屏幕上显示的按钮间循环。
额外 作者 Steve,

凯文,

这在大多数浏览器中无需JavaScript或CSS即可运行:

<form>

<input type="text" name="field1" />


<button type="button">Previous Page</button> <button type="submit">Next Page</button>

</form>

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

此版本在javascript打开时工作:

<form>

<input type="text" name="field1" />


<button type="button" onclick="window.location='previous.html'">Previous Page</button> <button type="submit">Next Page</button>

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

0
额外
没有JavaScript,你将无法激活“上一页”按钮,因为type =“button”!
额外 作者 riskop,

保持所有提交按钮的名称相同 - “prev”唯一的区别是具有唯一值的 value 属性。当我们创建脚本时,这些独特的值将帮助我们找出哪些提交按钮被按下。

并写下follwing编码:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
0
额外
问题在于,在文本字段中按回车将提交第一个提交按钮的表单,而不是预期的(本例中的第二个)。找出使用哪个提交按钮来提交表单很容易,这不是问题!
额外 作者 riskop,

改变标签顺序应该是完成这一切所需要的。把事情简单化。

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

0
额外

这是我尝试过的: 你需要确保你给你的按钮不同的名字 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();

}
0
额外
问题在于,在文本字段中按回车将提交第一个提交按钮的表单,而不是预期的(本例中的第二个)。找出使用哪个提交按钮来提交表单很容易,这不是问题!
额外 作者 riskop,

如果你在一个页面上有多个活动按钮,那么你可以做这样的事情:

在窗体上将要触发的第一个按钮标记为 Enter keypress作为默认按钮。第二个按钮将其与键盘上的 Backspace 按钮相关联。 Backspace eventcode是8。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(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>
</div> </div>

希望这可以帮助。

0
额外

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

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

     

如果用户代理支持让用户隐式提交表单   (例如,在某些平台上点击“输入”键的同时输入文本   字段隐式提交表单)...

让下一个输入为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>
0
额外

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

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

当我第一次反对这个时,我想出了一个onclick()/ js黑客,当选择不是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>

当单击任一提交按钮时,它会将所需操作存储在隐藏字段中(这是与表单关联的模型中包含的字符串字段),并将表单提交给Controller,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
}

您还可以使用数字操作代码稍微加强此操作以避免字符串解析,但除非您使用Enums,否则代码的可读性,可修改性和自我记录性较差,解析也很重要。

0
额外

尝试这个..!

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<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>
</div> </div>
0
额外

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

  1. 如果 JavaScript 已启用(现在大多数情况下),则所有提交按钮都会在页​​面加载时通过 JavaScript <降级 / code>(jquery)。 “降级”按钮类型按钮上的点击事件也可以通过 JavaScript 处理。

  2. 如果 JavaScript 未启用,表单将通过多个提交按钮提供给浏览器。在这种情况下,在表单内的 textfield 上按回车键将提交表单,而不是使用预设的默认,但至少表单仍可用:您可以使用上一个下一个按钮提交。

工作示例:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<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.
    
<input type="text" name="text1" >
<button type="submit" name="action" value="button1" >button 1</button>
<input type="text" name="text2" > <button type="submit" name="action" value="button2" >button 2</button>
<input type="text" name="text3" > <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>
</div> </div>
0
额外

你可以使用 Tabindex 来解决这个问题,同时改变按钮的顺序也是更有效的方法。更改按钮的顺序并添加 float 值以将它们分配给您想要在 HTML 视图中显示的所需位置。

0
额外