HTML 表单中的多个提交按钮

只需更改标签顺序即可完成此操作。把事情简单化。

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

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

只需更改标签顺序即可完成此操作。把事情简单化。

我第一次出现了这一点时，当我不喜欢/下一个我仍然喜欢它的简单性时，我想出了一个onclick（）/javascript 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>

当单击任一提交按钮时，它将所需的操作存储在隐藏字段中（这是包含在与表单关联的模型中的字符串字段）并将表单提交给控制器，控制器完成所有决定。在 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
}

您也可以使用数字操作代码稍微加强这一点，以避免字符串解析，但除非您使用枚举，否则代码的可读性、可修改性和自记录性较差，而且解析是微不足道的。

来自https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

表单元素的默认按钮是树形顺序中的第一个提交按钮，其表单所有者是该表单元素。如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本字段被聚焦时，按下“回车”键会隐式提交表单）......

让下一个输入为 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>

这是我尝试过的：

您需要确保为您的按钮指定不同的名称 编写一个 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();
}

当我发现 ASP 按钮有一个名为 UseSubmitBehavior 的属性时，我试图找到基本相同的问题的答案时遇到了这个问题，该属性允许您设置提交的内容。

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

以防万一有人正在寻找 ASP.NET 按钮的方式来做到这一点。

<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

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

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

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

如果启用了 JavaScript（现在大多数情况下），那么所有提交按钮都会在通过 JavaScript (jQuery) 加载页面时“降级”为按钮。 “降级”按钮类型按钮上的单击事件也通过 JavaScript 处理。如果未启用 JavaScript，则表单将通过多个提交按钮提供给浏览器。在这种情况下，在表单中的文本字段上按 Enter 将使用第一个按钮而不是预期的默认按钮提交表单，但至少该表单仍然可用：您可以使用 prev 和 next 按钮提交。

工作示例：

< form action="http://httpbin.org/post" method="post"> 如果 JavaScript 被禁用，那么您可以使用 button1、button2 或 button3 提交表单。如果您在文本字段上按 Enter，则表单将使用第一个提交按钮提交。如果启用了 JavaScript，则不带“defaultSubmitButton”样式的提交类型按钮将转换为按钮类型按钮。如果您在文本字段上按 Enter，则表单将使用唯一的提交按钮（具有类 defaultSubmitButton 的按钮）提交。如果您单击表单中的任何其他按钮，则使用该按钮的值提交表单。
button 1
< input type="text" name="text2" > button 2
default button

您可以使用 Tabindex 来解决此问题。更改按钮的顺序也是实现此目的的更有效方法。

更改按钮的顺序并添加 float 值，为它们分配您希望在 HTML 视图中显示的所需位置。

一种可能比 CSS 浮动方法更现代的方法可能是使用 flexbox 和 flex 项目上的 order 属性的解决方案。可能是这样的：

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

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

与其为多次提交、JavaScript 或类似的东西做一些上一个/下一个事情而苦苦挣扎，另一种选择是使用轮播来模拟不同的页面。这样做：

您不需要多个按钮、输入或提交来执行上一个/下一个操作，您只有一个输入类型=“提交”，只有一种形式。

在提交表单之前，整个表单中的值都存在。

用户可以完美地转到任何上一页和任何下一页来修改值。

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

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

因此，当用户单击 Previous 按钮时，其 type 将更改为 submit，并且表单将与 Previous 按钮一起提交。

<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移动到正确的地方（☹️可能不可行，可能会导致样式繁琐） 改变处理通过 JavaScript 输入的所有表单中的返回键（☹️ 需要 javascript）

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

选择的解决方案

// 示例实现 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(); } }) } } });

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
}