多提交HTML表单上的按钮 - 指定一个按钮为默认多提交HTML表单上的按钮 - 指定一个按钮为默认

我有三个按钮提交如下形式：

<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';">

按钮的排提交，复位和javascript按钮的组合。 按钮的顺序如有更改，但在任何情况下，保存按钮仍然prev和next按钮之间。 这里的问题是，当用户点击“确认”提交表单，后变“COMMAND”包含“后退”; 正常的，因为这是第一次提交表单按钮。 不过，我想“下一步”按钮被触发，当用户通过提交输入按钮的形式。 那种喜欢将它设置为默认的提交按钮，即使有之前其他按钮。

Answer 1:

我的建议是不要打这种行为。 可以有效地改变使用浮动的顺序。 例如：

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

有：

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

将有效地颠倒顺序，因此“下一步”按钮将通过敲击输入触发的值。

这种技术将涵盖许多情况下，而无需求助于更哈克JavaScript方法。

Answer 2:

第一个按钮始终是默认; 它不能被改变。 虽然你可以尝试使用JavaScript修复它，窗体将意外行为在没有脚本浏览器，另外还有一些可用性/无障碍角落的情况下考虑。 例如，通过卓然链接到代码将偶然提交对一个输入按形式<input type="button">它通常不会发生，而不会赶上提交表格上输入按IE的行为的形式等非字段的内容。 所以，如果你点击一些文本在<p>在形式与剧本并按下Enter键，错键将提交...如果特别危险的，因为在该例子中给出，真正的默认按钮是“删除”！

我的建议是关于使用脚本黑客重新分配defaultness忘记。 随着浏览器的流走，只是把默认的按钮第一。 如果你没本事的布局给你你想要的屏幕上的顺序，那么你可以通过在源先吃点虚拟隐形按钮，使用相同的名称/值，你想成为默认按钮做到这一点：

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

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

（注：定位是用来推离屏幕上的按钮，因为display: none和visibility: hidden 。对按钮是否被视为默认值，不管是提交浏览器的可变副作用）

Answer 3:

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，火狐，Chrome和Opera

Answer 4:

设置type=submit你想成为默认和按钮type=button到其他按钮。 现在，在下面的表格，你可以打任何输入字段中输入和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 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用于校正咏叹调隐藏避免使按钮通过屏幕阅读器/由辅助设备标识读出的隐藏按钮的选项卡的行为，以及。

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

这会捕获回车键只在表单上输入字段具有焦点。

Answer 8:

你不应该使用相同名称的按钮来。 这是不好的语义。 相反，你应该修改你的后端寻找设定不同的名称值：

<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';">

因为我不知道你正在使用的后台是什么语言，我会给你一些伪代码：

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的解决方案具有创建一个按钮，可以-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中的支持。

文章来源: Multiple submit buttons on HTML form – designate one button as default