HTML 表单中的多个提交按钮

08-06-2019
|

题

假设您以 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 去做这个？

解决方案

我希望这有帮助。我只是在耍花招 float按下右侧的按钮。

这样一来 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>

编辑： 相对于其他建议的好处：无 JavaScript，可访问，两个按钮均保留 type="submit"

其他提示

您是否可以将之前的按钮类型更改为这样的按钮：

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

现在“下一步”按钮将成为默认按钮，此外您还可以添加 default 属性给它，以便您的浏览器将突出显示它，如下所示：

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

希望有帮助。

为您的提交按钮指定相同的名称，如下所示：

<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 Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If

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

如果默认使用第一个按钮的事实在各个浏览器中是一致的，为什么不在源代码中以正确的方式放置它们，然后使用 CSS 来切换它们的明显位置呢？ float 例如，它们可以左右移动以在视觉上切换它们。

如果您真的只是希望它像安装对话框一样工作，那么只需将焦点放在 OnLoad 上的“下一步”按钮上即可。这样，如果用户点击 Return，表单就会提交并继续。如果他们想返回，可以按 Tab 键或单击按钮。

有时@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>

Kevin，这不能用纯 HTML 来完成。您必须依赖 JavaScript 来实现此技巧。

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

Form1 将具有上一个按钮。

Form2 将包含任何用户输入+下一步按钮。

当用户按下 进入 在 Form2 中，将触发“下一步提交”按钮。

你可以用 CSS 来做到这一点。

将按钮放入标记中 Next 首先按钮，然后 Prev 之后按钮。

然后使用 CSS 来定位它们，使其按照您想要的方式显示。

我会使用 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)" />

凯文，

在大多数浏览器中，这无需 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、Google 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 的情况下使用 IE，上一页将无法工作。
请注意，后退按钮仍然有效！

如果一页上有多个活动按钮，那么您可以执行以下操作：

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

希望这可以帮助。

只需更改 Tab 键顺序即可实现此目的。把事情简单化。

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

只需更改 Tab 键顺序即可实现此目的。把事情简单化。

保持所有提交按钮的名称相同 - “prev” 唯一的区别是 value 具有唯一值的属性。当我们创建脚本时，这些唯一值将帮助我们确定按下了哪个提交按钮。

并编写如下代码：

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

当我第一次遇到这个问题时，我想出了一个 onclick()/js hack，当选择不是上一个/下一个时，我仍然喜欢它的简单性。事情是这样的：

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

您还可以使用数字操作代码稍微收紧这一点，以避免字符串解析，但除非您使用枚举，否则代码的可读性、可修改性和自记录性较差，并且无论如何，解析都是微不足道的。

这是我尝试过的：1.您需要确保给按钮不同的名称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();

}

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

当我试图找到基本相同的事情的答案时，我遇到了这个问题，仅使用 asp.net 控件，当我发现 asp 按钮有一个名为的属性时 UseSubmitBehavior 这允许您设置由哪一个进行提交。

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

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

使用 javascript（此处为 jQuery），您可以在提交表单之前禁用上一个按钮。

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

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

如果 javascript 启用（现在大多数情况下）然后所有提交按钮都是“退化的" 到页面加载时的按钮 javascript （jquery）。点击事件“退化的“ 按钮类型的按钮也可以通过 javascript.
如果 javascript 未启用，则表单将通过多个提交按钮提供给浏览器。在这种情况下，按 Enter 键 textfield 在表单内将使用第一个按钮而不是预期的按钮提交表单默认, ，但至少形式仍然可用：您可以同时提交 上一页 和 下一个 纽扣。

工作示例：

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

尝试这个..！

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

您可以使用 Tabindex 为了解决这个问题，改变按钮的顺序将是实现这一目标的更有效的方法。更改按钮的顺序并添加 float 值以将它们分配给您想要在您的 HTML 看法。

使用您给出的示例：

<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”的值。如果单击“下一页”，则仅提交“下一页”的值。

但是，如果您在表单上的某个位置按 Enter 键，则“上一个”和“下一个”都不会提交。

因此，使用伪代码您可以执行以下操作：

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow