HTML表单中的多个提交按钮

小开

给你的提交按钮设置相同的名称，就像这样:

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

当用户按下输入并且请求转到服务器端时，你可以在服务器端代码中检查submitButton的值，该代码包含一个name/value对的集合。例如，在ASP经典中:

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

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

小开

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

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

现在下一个按钮将是默认的，另外你还可以添加default属性，这样你的浏览器就会像这样突出显示它:

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

小开

如果默认使用的第一个按钮在各个浏览器中是一致的，那么在源代码中将它们放在正确的位置，然后使用CSS来切换它们的明显位置。

float他们左右切换他们的视觉，例如。

小开

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

这里有两页给出了如何做到这一点的技术: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)" />

小开

用你给的例子:

<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

小开

如果你真的只是想让它像安装对话框一样工作，只需要关注“Next”按钮OnLoad。

这样，如果用户点击返回，表单就会提交并继续。如果他们想返回，他们可以点击选项卡或单击按钮。

小开

纯HTML无法做到这一点。要做到这一点，必须依赖JavaScript。

但是，如果在HTML页面上放置两个表单，则可以做到这一点。

Form1将拥有前面的按钮。

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

当用户在Form2中按输入时，Next提交按钮将被触发。

小开

最佳答案

我只是在做floating按钮向右的技巧。

这样，Prev按钮位于Next按钮的左边，但在HTML结构中Next位于前面:

.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"。

小开

在大多数浏览器中，无需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和谷歌Chrome浏览器都可以使用。像往常一样，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>

所以这个解决方案的缺陷是:

如果您使用关闭JavaScript的Internet Explorer，“上一页”将无法工作。

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

小开

你可以用CSS来做。

在标记中先放入Next按钮，然后再放入Prev按钮。

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

小开

<input type="submit" name="prev" 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

小开

有时提供的用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>

小开

要做到这一点，只需改变制表符顺序即可。保持简单。

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

小开

这是我尝试过的:

你需要确保你给你的按钮不同的名字
编写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();
}

小开

如果你在一个页面上有多个活动按钮，你可以这样做:

将你想在输入按键上触发的第一个按钮标记为表单上的默认按钮。对于第二个按钮，将其关联到键盘上的退格按钮。退格事件代码是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>

小开

另一个简单的选项是将返回按钮放在HTML代码中的提交按钮之后，但将其浮动到左侧，这样它就会出现在提交按钮之前的页面上。

要做到这一点，只需改变制表符顺序即可。保持简单。

小开

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

小开

使用JavaScript(这里是jQuery)，您可以在提交表单之前禁用prev按钮。

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

小开

当我第一次遇到这种情况时，我想出了一个onclick()/JavaScript hack，当选择不是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>

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

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

您还可以使用数值操作代码来避免字符串解析，但是除非使用枚举，否则代码可读性较差、可修改性较差、自文档性较差，解析也很简单。

小开

我在试图找到基本相同的问题的答案时遇到了这个问题，只是用ASP。NET控件，当我发现ASP按钮有一个名为UseSubmitBehavior的属性，它允许你设置哪一个进行提交。

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

以防有人在找ASP。NET按钮的方式来做。

小开

我用这种方法解决了一个非常相似的问题:

如果JavaScript被启用(在现在的大多数情况下)，那么所有的提交按钮都是“degraded”，通过JavaScript (jQuery)在页面加载按钮。点击事件上的“degraded”按钮类型的按钮也通过JavaScript处理。

如果JavaScript未启用，则表单将通过多个提交按钮提供给浏览器。在这种情况下，在表单中的textfield上点击Enter将使用第一个按钮提交表单，而不是预期的default，但至少表单仍然可用:你可以同时使用prev和next按钮提交。

工作的例子:

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

小开

你可以使用Tabindex来解决这个问题。此外，改变按钮的顺序将是实现这一目标的更有效方法。

改变按钮的顺序，并添加float值，将它们分配到你想在HTML视图中显示的位置。

小开

与其纠结于多次提交，JavaScript或类似的东西来做一些上/下的事情，另一种选择是使用旋转木马来模拟不同的页面。这样做:

你不需要多个按钮，输入或提交来做上一个/下一个事情，你只有一个input type="submit"在一个form中。
整个表单中的值一直存在，直到表单提交为止。
用户可以切换到任何上一页和下一页来完美地修改值。

使用Bootstrap 5.0.0的示例:

<div id="carousel" class="carousel slide" data-ride="carousel">
<form action="index.php" method="post" class="carousel-inner">
<div class="carousel-item active">
<input type="text" name="lastname" placeholder="Lastname"/>
</div>
<div class="carousel-item">
<input type="text" name="firstname" placeholder="Firstname"/>
</div>
<div class="carousel-item">
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
<a class="btn-secondary" href="#carousel" role="button" data-slide="prev">Previous page</a>
<a class="btn-primary" href="#carousel" role="button" data-slide="next">Next page</a>
</div>

小开

当用鼠标点击按钮时(最好是通过触摸)，它会记录X,Y坐标。当表单调用它时，情况并非如此，这些值通常为零。

所以你可以这样做:

function(e) {
const isArtificial = e.screenX === 0 && e.screenY === 0
&& e.x === 0 && e.y === 0
&& e.clientX === 0 && e.clientY === 0;


if (isArtificial) {
return; // DO NOTHING
} else {
// OPTIONAL: Don't submit the form when clicked
// e.preventDefault();
// e.stopPropagation();
}


// ...Natural code goes here
}

小开

我认为这是一个简单的解决方法。将以前的按钮type更改为button，并为值为jQuery(this).attr('type','submit');的按钮添加一个新的onclick属性。

因此，当用户单击以前的按钮时，它的type将被更改为submit，表单将与以前的按钮一起提交。

<form>
<!-- Put your cursor in this field and press Enter -->
<input type="text" name="field1" />


<!-- This is the button that will submit -->
<input type="button" onclick="jQuery(this).attr('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>

小开

在CSS float方法上，一种更现代的方法可能是在flex项上使用带有order属性的flexbox。它可能是这样的:

<div style="display: flex">
<input type="submit" name="next" value="Next Page" style="order: 1" />
<input type="submit" name="prev" value="Previous Page" style="order: 0" />
</div>

当然，这是否可行取决于您的文档结构，但我发现伸缩项比浮动元素更容易控制。

小开

问题

一个表单可以有几个提交按钮。当在任何输入中按回车键时，浏览器将使用第一个提交按钮。然而，有时我们想使用一个不同的/稍后按钮作为默认值

选项

首先添加一个具有相同操作的隐藏提交按钮(☹️副本)
首先在表单中放入所需的提交按钮，然后通过CSS将其移动到正确的位置(☹️可能不可行，可能导致繁琐的样式)
通过JavaScript改变所有表单输入中的返回键的处理(☹️需要JavaScript)

没有一个选项是理想的，所以我们选3。因为大多数浏览器都启用了JavaScript。

选择解决方案

// example implementation
document.addEventListener('DOMContentLoaded', (ev) => {
for (const defaultSubmitInput of document.querySelectorAll('[data-default-submit]')) {
for (const formInput of defaultSubmitInput.form.querySelectorAll('input')) {
if (formInput.dataset.ignoreDefaultSubmit != undefined) { continue; }
formInput.addEventListener('keypress', (ev) => {
if (ev.keyCode == 13) {
ev.preventDefault();
defaultSubmitInput.click();
}
})
}
}
});

  <!-- example markup -->
<form action="https://postman-echo.com/get" method="get">
<input type="text" name="field1">
<input type="submit" name="submit" value="other action">
<input type="submit" name="submit" value="default action" data-default-submit> <!-- this button will be used on return -->
</form>

能够从某些输入中删除增强可能是有用的。这可以通过以下方法实现:

<input type="text" name="field2" data-ignore-default-submit> <!-- uses browser standard behaviour -->

这里是一个完整的代码的钢笔。