Question

假设您在HTML表单中创建了一个向导。一个按钮返回，一个按钮前进。由于当您按Enter键时， back 按钮首先出现在标记中，它将使用该按钮提交表单。

示例：

<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来执行此操作？

Answer 1

我希望这会有所帮助。我正在做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"

Answer 2

您是否可以将上一个按钮类型更改为如下按钮：

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

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

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

希望有所帮助。

Answer 3

将提交按钮命名为：

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

当用户按Enter键并且请求转到服务器时，您可以检查服务器端代码上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

参考：Using multiple submit buttons on a single form

Answer 4

如果默认情况下使用第一个按钮的事实在浏览器中是一致的，为什么不在源代码中以正确的方式放置它们，然后使用CSS切换它们的表观位置？例如，float左右可以直观地切换它们。

Answer 5

如果你真的希望它像安装对话框一样工作，那么只关注OnLoad的“Next”按钮。这样，如果用户点击Return，表单就会提交并继续前进。如果他们想回去，可以点击Tab或点击按钮。

Answer 6

凯文，这不能用纯HTML来完成。你必须依靠JavaScript才能获得这个技巧。

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

Form1将具有上一个按钮。

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

当用户在Form2中按 Enter 时，将触发下一个提交按钮。

Answer 7

您可以使用CSS。

首先使用Next按钮将标记放在标记中，然后使用Prev按钮。

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

Answer 8

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

Answer 9

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

以下两页提供了有关如何执行此操作的技巧：1，2。基于这些，这是一个使用示例（基于here）：

<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)" />

Answer 10

凯文，

这在大多数浏览器中都没有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，则上一页不起作用请注意，后退按钮仍然有效！

Answer 11

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

在表单上将 Enter keypress上的第一个按钮标记为默认按钮。对于第二个按钮，将其与键盘上的 Backspace 按钮相关联。 Backspace eventcode为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>

希望这有帮助。

Answer 12

更改Tab键顺序应该是完成此操作所需的全部内容。把事情简单化。

另一个简单的选项是将后退按钮放在HTML代码中的提交按钮之后，但将其浮动到左侧，使其显示在提交按钮之前的页面上。

Answer 13

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

更改Tab键顺序应该是完成此操作所需的全部内容。保持简单。

Answer 14

我第一次遇到这种情况时，我想出了一个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>

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

你也可以使用数字操作代码稍微加强一点，以避免字符串解析，但除非你使用Enums，否则代码的可读性，可修改性和自我记录性都很差，无论如何解析都是微不足道的。

Answer 15

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

写下以下编码：

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

Answer 16

这是我尝试过的： 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();

}

Answer 17

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

Answer 18

当我试图找到一个基本相同的答案时，我遇到了这个问题，只有asp.net控件，当我发现asp按钮有一个名为UseSubmitBehavior的属性，允许你设置一个人提交。

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

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

Answer 19

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

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

Answer 20

试试这个..！

＆＃13;

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

＆＃13;

Answer 21

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

如果启用了javascript（现在大多数情况下都是如此），那么所有提交按钮都是“降级”到页面加载时通过javascript（jquery）的按钮。 “降级”按钮类型按钮上的点击事件也可通过javascript处理。
如果未启用javascript，则表单将通过多个提交按钮提供给浏览器。在这种情况下，点击表单中的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>

Answer 22

您可以使用Tabindex来解决此问题，同时更改按钮的顺序将是实现此目的的更有效方法。更改按钮的顺序并添加float值，为其指定要在HTML视图中显示的所需位置。

Answer 23

与其费力地处理多个提交，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>

Answer 24

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

因此，当用户单击“上一个”按钮时，其 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>

Answer 25

当用鼠标（最好是通过触摸）点击按钮时，它会记录 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
}

Answer 26

使用您提供的示例：

<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键，则不会提交“prev”或“next”。

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

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

HTML表单中的多个提交按钮

26 个答案: