html - Multiple submit buttons on HTML form – designate one button as default

Question

I have a form that has three submit buttons as follows:

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

The row of buttons is a mix of submit, reset and JavaScript buttons. The order of buttons is subject to change, but in any case the save button remains between prev and next buttons.

The problem here is that when a user hits Enter to submit the form, the post variable "COMMAND" contains "Prev"; normal, as this is the first submit button on the form. I however want the "Next" button to be triggered when the user submits the form via the Enter button. It is kind of like setting it as the default submit button, even though there are other buttons before it.

Answer 1

第一个按钮始终是默认按钮；它不能改变。虽然您可以尝试使用 JavaScript 修复它，但表单在没有脚本的浏览器中会出现意外行为，并且需要考虑一些可用性/可访问性极端情况。例如，Zoran 链接的代码会不小心在 Enter press in a 中提交表单<input type="button">，这通常不会发生，并且不会捕获 IE 在表单中的其他非字段内容上提交表单 for Enter press 的行为. 因此，如果您使用该脚本单击<p>表单中的某些文本并按 Enter，则会提交错误的按钮……如果如该示例中给出的那样，真正的默认按钮是“删除”，则尤其危险！

我的建议是忘记使用脚本技巧来重新分配默认值。跟随浏览器的流程，只需将默认按钮放在第一位。如果您无法破解布局来为您提供所需的屏幕顺序，那么您可以通过在源中首先使用一个虚拟的不可见按钮来做到这一点，其名称/值与您想要默认的按钮相同：

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

（注意：定位用于将按钮推到屏幕外，因为display: none并且visibility: hidden对按钮是否被视为默认按钮以及是否已提交具有浏览器变量的副作用。）

Answer 2

My suggestion is don't fight this behaviour. You can effectively alter the order using floats. For example:

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

with:

#buttons { overflow: hidden; }
#buttons input { float: right; }

will effectively reverse the order and thus the "Next" button will be the value triggered by hitting enter.

This kind of technique will cover many circumstances without having to resort to more hacky JavaScript methods.

Answer 3

设置type=submit为您想要默认的按钮和type=button其他按钮。现在在下面的表单中，您可以在任何输入字段中按 Enter，该Render按钮将起作用（尽管它是表单中的第二个按钮）。

例子：

    <button id='close_button' class='btn btn-success'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            type=submit>             <!--  Here we use SUBMIT, not BUTTON -->
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

在 FF24 和 Chrome 35 中测试。

Answer 4

Quick'n'dirty 你可以创建一个隐藏的提交按钮副本，当按下回车键时应该使用它。

示例 CSS

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

示例 HTML

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

如果有人现在在您的表单中点击输入，（隐藏的）下一步按钮将用作提交者。

在 IE9、Firefox、Chrome 和 Opera 上测试

Answer 5

如果您使用的是 jQuery，那么这里的评论中的这个解决方案非常巧妙：

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

只需添加class="default"到您想成为默认按钮的按钮。它将该按钮的隐藏副本放在表单的开头。

Answer 6

我正在复活这个，因为我正在研究一种非 JavaScript 方法来做到这一点。我没有进入关键处理程序，并且 CSS 定位的东西导致制表符顺序中断，因为 CSS 重新定位不会更改制表符顺序。

我的解决方案基于https://stackoverflow.com/a/9491141上的响应。

解决方案来源如下。tabindex 用于纠正隐藏按钮的选项卡行为，以及 aria-hidden 以避免屏幕阅读器读出按钮/辅助设备识别按钮。

<form method="post" action="">
  <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
  <div class="form-group">
    <label for="test-input">Focus into this input: </label>
    <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
  </div>

DOM 中的第一个按钮 DOM 中的第二个按钮 DOM 中的第三个按钮

此解决方案的基本 CSS：

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

Answer 7

另一个解决方案，使用 jQuery：

$(document).ready(function() {
  $("input").keypress(function(e) {
    if (e.which == 13) {
      $('#submit').click();
      return false;
    }

    return true;
  });
});

这应该适用于以下表单，使“更新”成为默认操作：

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <input type="submit" name="button2" value="Delete" />
  <input type="submit" name="button1" id="submit" value="Update" />
</form>

也：

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <button type="submit" name="button2">Delete</button>
  <button type="submit" name="button1" id="submit">Update</button>
</form>

仅当表单上的输入字段具有焦点时，才会捕获 Enter 键。

Answer 8

You should not be using buttons of the same name. It's bad semantics. Instead, you should modify your backend to look for different name values being set:

<input type="submit" name="COMMAND_PREV" value="&lsaquo; Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="window.location = 'yada-yada.asp';">

Since I don't know what language you are using on the backend, I'll give you some pseudocode:

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}

Answer 9

bobince 的解决方案的缺点是创建一个可以Tab-d 结束的按钮，但否则无法使用。这会给键盘用户造成混乱。

另一种解决方案是使用鲜为人知的form属性：

<form>
    <input name="data" value="Form data here">
    <input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
    <input type="submit" name="submit" value="Submit">
</form>

<form id="form2"></form>

这是标准 HTML，但遗憾的是 Internet Explorer 不支持。