HTML表单中的多个提交button
假设您在HTML表单中创build向导。 一个button返回，一个button向前。 由于后退button在按下Enter键时会首先出现在标记中，因此将使用该button提交表单。
例：
<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> 我想要做的是，当用户按下回车键时，可以决定使用哪个button提交表单。 这样，当你按下Enter时，向导将移动到下一页，而不是前一页。 你必须使用tabindex来做到这一点？
我希望这有帮助。 我只是在float右边的button。
这种方式Prevbutton是Nextbutton的左边，但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>
是否有可能将上一个buttontypes更改为如下所示的button：
<input type="button" name="prev" value="Previous Page" />
现在Nextbutton将成为默认值，另外您还可以添加default属性，以便您的浏览器像下面这样突出显示它：
<input type="submit" name="next" value="Next Page" default />
希望有所帮助。
给你的提交button相同的名字是这样的：
<input type="submit" name="submitButton" value="Previous Page" /> <input type="submit" name="submitButton" value="Next Page" />
当用户按下Enter键并且请求发送到服务器时，您可以在包含表单name/value对集合的服务器端代码中检查submitButton name/value 。 例如在经典的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
参考： 在一个表单上使用多个提交button
如果默认情况下使用的第一个button在浏览器中是一致的，那么为什么不把它们放在源代码中，然后使用CSS来切换它们的外观？ 例如，将它们左右float以在视觉上切换它们。
如果你真的只想让它像安装对话框一样工作，那么把焦点放在“下一步”buttonOnLoad上呢？ 这样，如果用户点击返回，表单提交并前进。 如果他们想回去，他们可以按Tab键或点击button。
它可以使用CSS
把它们放在标记中，作为下一个button，然后是上一个button。
然后使用CSS来定位它们以出现您想要的方式
有时由@palotasb提供的解决scheme是不够的。 有一些用例，例如一个“filter”提交button被放置在像“Next and Previous”之类的button之上。 我find了一个解决方法： 复制提交button，需要作为默认的提交button在一个隐藏的div，并将其放置在任何其他提交button上方的forms。 从技术上讲，当按Enter键时，它会被另一个button提交，然后点击可见的Nextbutton。 但由于名称和价值是一样的，结果没有什么不同。
<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>
凯文，这不能用纯HTML完成。 这个技巧你必须依靠JavaScript。
但是，如果您在HTML页面上放置两个表单，则可以执行此操作。
Form1将具有上一个button。
Form2将有任何用户input+下一个button。
当用户在Form2中按Enter时，下一个提交button将会触发。
我会用Javascript来提交表单。 该函数将由表单元素的OnKeyPress事件触发，并将检测是否select了回车键。 如果是这样，它会提交表格。
这里有两页给出了如何做到这一点的技巧： 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)" />
凯文，
这在大多数浏览器中没有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，谷歌浏览器都能正常工作。
一如既往，IE是问题所在。
这个版本在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>
所以这个解决scheme的缺陷是：
如果您使用JavaScriptclosuresJavascript，则上一页不起作用。
请注意，后退button仍然有效！
保持所有提交button的名称相同 – “prev”唯一的区别是具有唯一值的value属性。 当我们创build脚本时，这些独特的值将帮助我们找出哪些提交button被按下。
并写下follwing编码：
btnID = "" if Request.Form("prev") = "Previous Page" then btnID = "1" else if Request.Form("prev") = "Next Page" then btnID = "2" end if
改变标签顺序应该是完成这一切所需要的。 把事情简单化。
另一个简单的select是将后退button放在HTML代码中的提交button之后，但是将其向左浮动以使其在提交button之前出现在页面上。
另一个简单的select是将后退button放在HTML代码中的提交button之后，但是将其向左浮动以使其在提交button之前出现在页面上。
更改标签顺序应该是完成这一切所需要的。 把事情简单化。
这是我已经试过了：1.你需要确保你给你的button不同的名字2.编写一个if语句，将执行所需的行动，如果任何一个button被点击。
<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(); }
如果你在一个页面上有多个活动button，那么你可以做这样的事情：
在input按键上标记您要触发的第一个button，作为窗体上的默认button。 对于第二个button将其关联到键盘上的Backspacebutton。 // 退格事件代码是8。
<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> <script type="text/javascript"> $(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>
希望这可以帮助。
从https://html.spec.whatwg.org/multipage/forms.html#implicit-submission
表单元素的默认button是树形次序中的第一个提交button，其表单所有者是该表单元素。
如果用户代理支持让用户隐式提交表单（例如，在某些平台上按下“input”键而文本字段集中隐式提交表单）…
让下一个input为type =“submit”并将之前的input改为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>
我第一次遇到这个问题时，我提出了一个onclick（）/ js黑客，当select不是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>
当任何一个提交button被点击时，它将把所需的操作存储在一个隐藏的字段中（这是一个与表单关联的模型中的string字段），并将表单提交给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 }
您也可以使用数字操作代码稍微收紧这个string以避免stringparsing，但除非您使用Enums，否则代码的可读性，可修改性和自我logging性较差，parsing也是微不足道的。
用JavaScript（这里是jQuery），你可以在提交表单之前禁用prevbutton。
$('form').on('keypress', function(event) { if (event.which == 13) { $('input[name="prev"]').prop('type', 'button'); } });
当我试图find一个基本上相同的东西的答案时，我遇到了这个问题，只有与asp.net控件，当我发现aspbutton有一个名为UseSubmitBehavior属性，允许您设置提交的人。
<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />
以防万一有人正在寻找的asp.netbutton的方式来做到这一点。
尝试这个..！
<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>
用你给的例子：
<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”的值。 如果点击“下一页”，则只会提交“下一页”的值。
但是，如果您按下表格上的某个地方，则不会提交“上一个”和“下一个”。
所以使用伪代码，你可以做到以下几点：
If "prev" submitted then Previous Page was click Else If "next" submitted then Next Page was click Else No button was click
