HTML表单中的多个提交按钮

Kevin 243 html html-form form-submit submit-button

假设您在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这个吗?

palotasb.. 132

我希望这有帮助.我只是在做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"

  • 如果不更改标签顺序,请不要这样做,以便按下标签按钮将循环显示屏幕上显示的按钮. (21认同)

Wally Lawles.. 60

您是否可以将以前的按钮类型更改为如下按钮:

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

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

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

希望有所帮助.

  • **你在说什么`default`属性?**没有"默认"属性,这是有效的:http://www.w3.org/html/wg/drafts/html/master/single-page .html #the-input-element(不在HTML5中,HTML 4.01 Transitional/Strict,XHTML 1.0 Strict).我不明白为什么将输入类型从`submit`更改为`button`会更好.您可以在一个表单中使用多个提交类型输入元素而不会出现问题.我真的不明白为什么这个答案如此受欢迎. (37认同)
  • @BrettCaswell:改变这些按钮的类型是一个不好的解决方法(参见我之前的评论).HTML中没有用于`input`标签的有效`default`属性(如前所述),而且(流行的)浏览器不会突出显示具有此属性的按钮,这意味着此属性没有非标准实现 - 所以我仍然不知道@Wally Lawless在谈论什么,以及为什么这个答案被高估了.HTML5中只引入了一个有效的`default`属性,但仅适用于`<track>`标记:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track (4认同)
  • 输入"按钮"类型不会执行表单操作.你可以有一个onclick或者其他东西,从而执行另一个函数而不是"默认"表单动作(通过按"提交" - 类型按钮执行).这就是我在寻找的东西,这就是我为什么赞成它的原因.不能代表"默认"属性,不是我的问题的一部分;)谢谢你的澄清. (3认同)
  • @Jonas:是的,`type ="button"`不提交表单,`type ="submit"`确实如此,但更改这些按钮的类型绝对不是解决方案,因为这些按钮基本上应该以相同的方式运行 - OP的问题是如何使"下一步"按钮成为按Enter键的默认按钮.在接受的答案中有一个可能的解决方案. (3认同)
  • @ Sk8erPeter,@ Jonas ....嗯..我怀疑这个`default`属性是Global属性; enumerated属性..与枚举状态有关:http://www.w3.org/html/wg/drafts/html/master/single-page.html#keywords-and-enumerated-attributes.除此之外..这个答案的按钮方面不是答案..它是'**条件建议**'或查询(**问题本身**). (2认同)

huseyint.. 53

为您的提交按钮提供如下相同的名称:

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

当用户按Enter键并且Request转到服务器时,您可以检查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

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

  • 这不是用户问的问题.用户想要知道如何控制在按下输入时激活表单中的哪个提交按钮,即.这是默认按钮. (25认同)
  • 在I18n应用程序中不起作用,你甚至不知道按钮的标签. (20认同)

Polsonby.. 30

如果默认情况下使用第一个按钮的事实在浏览器中是一致的,为什么不在源代码中将它们放在正确的方向,然后使用CSS来切换它们的表观位置?float例如,他们左右移动以在视觉上切换它们.


Scott Gottre.. 17

如果你真的只是希望它像安装对话框那样工作,那么只关注"下一步"按钮OnLoad.这样,如果用户点击Return,表单就会提交并继续前进.如果他们想要返回,他们可以点击Tab或点击按钮.

  • 他们的意思是有人在文本字段中填写表单并返回. (2认同)

FlySwat.. 16

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

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

Form1将具有上一个按钮.

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

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


qui.. 16

它可以与CSS一起使用

首先将它们作为下一个按钮放在标记中,然后是下一个按钮.

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


netiul.. 16

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


Yaakov Ellis.. 15

我会使用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会发生什么? (2认同)
  • 你不应该使用<! - 和 - >来注释掉JS,这些标签不是Javascript语言标记 (2认同)
  • @Marecky他们不是要评论JS.在支持<script>的浏览器中解析<script>的内容时会忽略它们.今天他们真的不是必需的.但在非常古老的浏览器中,这是一个兼容性黑客,以避免脚本打印为纯文本. (2认同)

Jolyon.. 13

凯文,

这在大多数浏览器中都没有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>

所以这个解决方案的缺陷是:
如果你使用IE与Javascript关闭,上一页不起作用.
请注意,后退按钮仍然有效!


用户甲.. 12

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

Enter按键上将您想要触发的第一个按钮标记为表单上的defaultbutton.对于第二个按钮,将其与Backspace键盘上的按钮相关联.Backspaceeventcode是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>

希望这可以帮助.


Kenny Johnso.. 11

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

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


用户甲.. 11

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

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


用户甲.. 10

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

并写下以下编码:

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


MiddleAgedMu.. 10

我第一次遇到这种情况时,我想出了一个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,否则代码的可读性,可修改性和自我记录性较差,无论如何解析都是微不足道的.


Samuel Mugis.. 9

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

}


用户甲.. 9

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


Barry Frankl.. 8

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

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

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


GuillaumeS.. 7

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

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