HTML表单中的多个提交按钮
假设您以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此功能？
第3885篇《HTML表单中的多个提交按钮》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
使用您给出的示例：
<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
尝试这个..！
<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>当我发现ASP按钮具有一个名为的属性UseSubmitBehavior，该属性允许您设置要提交的内容时，我仅在ASP.NET控件中尝试找到基本相同的答案时遇到了这个问题。
<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />
以防万一有人在寻找使用ASP.NET按钮的方法。
来自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>
更改制表符顺序应该是完成此操作的全部方法。把事情简单化。
另一个简单的选择是将后退按钮放在HTML代码中的“提交”按钮之后，但将其浮动到左侧，以便它出现在页面上的“提交”按钮之前。
<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
另一个简单的选择是将后退按钮放在HTML代码中的“提交”按钮之后，但将其浮动到左侧，以便它在页面上出现在“提交”按钮之前。
更改制表符顺序应该是完成此操作的全部方法。把事情简单化。
纯HTML不能做到这一点。您必须依靠JavaScript才能实现此技巧。
但是，如果在HTML页面上放置两个表单，则可以执行此操作。
Form1将具有上一个按钮。
Form2将具有任何用户输入+下一个按钮。
当用户按下EnterForm2时，将触发“下一步提交”按钮。
我将使用JavaScript提交表单。该函数将由form元素的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)" />
您可以使用CSS来实现。
首先将按钮放入标记中Next，然后再将Prev按钮放置。
然后使用CSS定位它们，使其以您想要的方式显示。
如果默认情况下使用第一个按钮的事实在浏览器之间是一致的，请在源代码中以正确的方式放置它们，然后使用CSS切换它们的明显位置。
float 例如，它们可以左右移动以在视觉上切换它们。
有时@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>
将以前的按钮类型更改为这样的按钮：
<input type="button" name="prev" value="Previous Page" />
现在，“ 下一步”按钮将成为默认按钮，此外，您还可以default向其中添加属性，以便浏览器将其突出显示，如下所示：
<input type="submit" name="next" value="Next Page" default />
如果您真的只是希望它像安装对话框一样工作，则只需将焦点放在“下一步”按钮OnLoad上即可。
这样，如果用户点击Return，则表单将提交并继续前进。如果他们想返回，可以点击Tab或单击按钮。
相似问题
问题类别
您可以
Tabindex用来解决此问题。同样，更改按钮的顺序将是更有效的方法。更改按钮的顺序并添加
float值以将它们分配给想要在HTML视图中显示的所需位置。