HTML表单中的多个提交按钮

Translate

假设您以HTML表单创建向导。一键向后退,一键向前。自从背部当您按下按钮时,按钮会首先出现在标记中输入,它将使用该按钮提交表单。

例:

<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>
This question and all comments follow the "Attribution Required."

所有的回答

Translate

我希望这有帮助。我只是在欺骗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>
来源
Translate

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

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

现在下一个按钮将是默认按钮,此外您还可以添加default属性,以便您的浏览器将其突出显示,如下所示:

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

为您的提交按钮命名,如下所示:

<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

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

来源
Translate

如果默认情况下使用第一个按钮的事实在浏览器之间是一致的,请在源代码中以正确的方式放置它们,然后使用CSS切换它们的明显位置。

float例如,它们可以左右移动以在视觉上切换它们。

来源
Translate

如果您真的只希望它像安装对话框一样工作,则只需将焦点放在“下一步”按钮OnLoad上即可。

如果用户点击返回,表单提交并继续。如果他们想回去就可以打标签或单击按钮。

来源
Translate

有时@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>
来源
Translate

您可以使用CSS来实现。

将按钮放在标记中Next按钮,然后Prev按钮。

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

来源
Translate

纯HTML不能做到这一点。您必须依靠JavaScript才能实现此技巧。

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

Form1将具有上一个按钮。

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

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

来源
qui
Translate

我将使用JavaScript提交表单。该函数将由form元素的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)" />
来源
Translate

在大多数浏览器中,此方法无需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均可使用。
与往常一样,Internet Explorer就是问题所在。

启用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,则“前一页”不起作用。

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

来源
Translate

如果一页上有多个活动按钮,则可以执行以下操作:

在屏幕上标记要触发的第一个按钮输入按键作为表单上的默认按钮。对于第二个按钮,将其关联到退格键键盘上的按钮。的退格键事件代码为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>
来源
Translate

更改制表符顺序应该是完成此操作的全部方法。把事情简单化。

另一个简单的选择是将后退按钮放在HTML代码中的“提交”按钮之后,但将其向左浮动,使其在页面上出现在“提交”按钮之前。

来源
Translate

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

更改制表符顺序应该是完成此操作的全部方法。把事情简单化。

来源
Alger Lee
Translate
<input type="submit" name="perv" 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
来源
Translate

第一次遇到这个问题时,我想到了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
}

您也可以使用数字操作代码略微加强此功能,以避免字符串解析,但是除非您使用枚举,否则代码的可读性,可修改性和自文档性较低,并且无论如何解析都是微不足道的。

来源
Translate

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>
来源
Translate

这是我尝试过的:

  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();
}
来源
Translate

当我发现ASP按钮具有一个名为的属性时,当我试图找到基本相同的答案(仅使用ASP.NET控件)时,遇到了这个问题。UseSubmitBehavior您可以设置要提交的文件。

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

以防万一有人在寻找使用ASP.NET按钮的方法。

来源
Translate

使用JavaScript(此处为jQuery),可以在提交表单之前禁用prev按钮。

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

尝试这个..!

<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>
来源
Translate

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

  1. 如果启用了JavaScript(在当今大多数情况下),则所有提交按钮均为“降级通过JavaScript(jQuery)加载到页面加载按钮。降级按钮类型的按钮也可以通过JavaScript处理。

  2. 如果未启用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>
来源
Translate

您可以使用Tabindex解决这个问题。同样,更改按钮的顺序将是实现此目的的更有效方法。

更改按钮的顺序并添加float值,以将其分配给您想要显示在自己的位置HTML视图。

来源
Translate

使用您给出的示例:

<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”和“ next”均不会提交。

因此,使用伪代码可以执行以下操作:

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