HTML 表单中的多个提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple submit buttons in an HTML form
提问by Kevin
Let's say you create a wizard in an HTML form. One button goes back, and one goes forward. Since the backbutton 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>I would like to get to decide which button is used to submit the form when a user presses Enter. That way, when you press Enterthe wizard will move to the next page, not the previous. Do you have to use tabindexto do this?
我想决定在用户按下时使用哪个按钮提交表单Enter。这样，当您按下Enter向导时，向导将移动到下一页，而不是上一页。您必须使用它tabindex来执行此操作吗？
采纳答案by palotasb
I hope this helps. I'm just doing the trick of floating the buttons to the right.
我希望这有帮助。我只是在做float向右按钮的技巧。
This way the Prevbutton is left of the Nextbutton, but the Nextcomes first in the HTML structure:
这样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>Benefits over other suggestions: no JavaScript code, accessible, and both buttons remain type="submit".
优于其他建议的优点：没有 JavaScript 代码，可访问，并且两个按钮都保留type="submit"。
回答by Wally Lawless
Change the previous button type into a button like this:
把之前的按钮类型改成这样的按钮：
<input type="button" name="prev" value="Previous Page" />
Now the Nextbutton would be the default, plus you could also add the defaultattribute to it so that your browser will highlight it like so:
现在Next按钮将是默认按钮，此外您还可以向其添加default属性，以便您的浏览器将其突出显示，如下所示：
<input type="submit" name="next" value="Next Page" default />
回答by huseyint
Give your submit buttons the same name like this:
为您的提交按钮指定相同的名称，如下所示：
<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />
When the user presses Enterand the requestgoes to the server, you can check the value for submitButtonon your server-side code which contains a collection of form name/valuepairs. For example, in ASP Classic:
当用户按下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
回答by Polsonby
If the fact that the first button is used by default is consistent across browsers, put them the right way around in the source code, and then use CSS to switch their apparent positions.
如果默认使用第一个按钮的事实在浏览器中是一致的，请将它们放在源代码中的正确位置，然后使用 CSS 切换它们的明显位置。
floatthem left and right to switch them around visually, for example.
float例如，它们可以左右切换以在视觉上进行切换。
回答by netiul
Sometimes the provided solution by @palotasb is not sufficient. There are use cases where for example a "Filter" submits button is placed above buttons like "Next and Previous". I found a workaround for this: copythe 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 than when clicking on the visible Next button. But since the name and value are the same, there's no difference in the result.
有时@palotasb 提供的解决方案是不够的。在某些用例中，例如“过滤器”提交按钮放置在“下一个和上一个”等按钮上方。我找到了一个解决方法：复制需要充当隐藏 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>
回答by Yaakov Ellis
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 Enterkey 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)" />
回答by Scott Gottreu
If you really just want it to work like an install dialog, just give focus to the "Next" button OnLoad.
如果您真的只是希望它像安装对话框一样工作，只需将焦点放在“下一步”按钮 OnLoad。
That way if the user hits Return, the form submits and goes forward. If they want to go back they can hit Tabor click on the button.
这样，如果用户点击Return，表单就会提交并继续前进。如果他们想返回，他们可以点击Tab或点击按钮。
回答by FlySwat
This cannot be done with pure HTML. You must rely on JavaScript for this trick.
这不能用纯 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 将有任何用户输入 + 下一个按钮。
When the user presses Enterin Form2, the Next submit button would fire.
当用户Enter在 Form2 中按下时，下一步提交按钮将触发。
回答by qui
You can do it with CSS.
你可以用 CSS 做到这一点。
Put the buttons in the markup with the Nextbutton first, then the Prevbutton afterwards.
将按钮放在标记中，Next首先是按钮，然后是Prev按钮。
Then use CSS to position them to appear the way you want.
然后使用 CSS 将它们定位为您想要的方式。
回答by Jolyon
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, and Google Chrome all work.
As always, Internet Explorer is the problem.
Firefox、Opera、Safari 和 Google Chrome 都可以使用。
与往常一样，Internet Explorer 是问题所在。
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 Internet Explorer with JavaScript off.
如果您在关闭 JavaScript 的情况下使用 Internet Explorer，则上一页将不起作用。
Mind you, the back button still works!
请注意，后退按钮仍然有效！
