如果提交了表单,但不是通过任何特定的按钮,例如

按Enter键 使用JS中的HTMLFormElement.submit()

浏览器应该如何确定多个提交按钮(如果有的话)中的哪一个作为按下的按钮呢?

这在两个层面上很重要:

调用附加到提交按钮的onclick事件处理程序 数据发送回web服务器

到目前为止,我的实验表明:

当按Enter键时,Firefox、Opera和Safari使用表单中的第一个提交按钮 当按Enter键时,IE要么使用第一个提交按钮,要么根本不使用,这取决于我还没能弄清楚的条件 所有这些浏览器都不使用JS提交

标准是怎么说的?

如果有帮助的话,下面是我的测试代码(PHP只与我的测试方法相关,与我的问题本身无关)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>

<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="text" name="method" />
    <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
    <input type="text" name="stuff" />
    <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
    <input type="button" value="submit" onclick="document.theForm.submit();" />
</form>

</body></html>

当前回答

我有一个带有11个提交按钮的表单,当用户按下Enter键时,它总是使用第一个提交按钮。我在别处读到过,在一个表单上有多个提交按钮不是一个好主意(糟糕的做法),最好的方法是将您想要的按钮作为默认按钮,作为表单上唯一的提交按钮。其他按钮应该变成“TYPE=BUTTON”,并添加一个onClick事件,用JavaScript调用自己的提交例程。就像这样:

<SCRIPT Language="JavaScript">
function validform()
{
  // Do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

这里,button3是默认的,尽管您是通过编程方式提交表单和其他按钮,但mjsubmit例程将验证它们。

其他回答

我纠结于同样的问题,因为我在表单中间有一个提交按钮,可以重定向提交到另一个页面,就像这样:

<button type="submit" onclick="this.form.action = '#another_page'">More</button>

当用户按下Enter键时,单击的是这个按钮,而不是另一个提交按钮。

所以我做了一些基本的测试,创建了一个带有多个提交按钮和不同可见性选项的表单,并创建了一个onclick事件来提醒哪个按钮被单击:https://jsfiddle.net/aqfy51om/1/

我用于测试的浏览器和操作系统:

窗户

谷歌Chrome 43(来谷歌搜索:D) Mozilla Firefox 38 Internet Explorer 11 Opera 30.0

OS X

谷歌Chrome 43 Safari 7.1.6

尽管应用了可见性选项,但大多数浏览器都点击了第一个按钮,除了ie和Safari会单击第三个按钮,这是一个“隐藏”容器中的“可见”按钮:

<div style="width: 0; height: 0; overflow: hidden;">
    <button type="submit" class="btn btn-default" onclick="alert('Hidden submit button #3 was clicked');">Hidden submit button #3</button>
</div>

所以我的建议,也就是我自己的建议是:

如果你的表单有多个不同含义的提交按钮,那么在表单的开头包含一个默认动作的提交按钮,它可以是:

完全可见 用style="width: 0;高度:0;溢出:隐藏。”

另一种选择可能是偏移按钮(仍然在from的开头)style="position: absolute;左:-9999 px;顶部:-9999px;",刚刚尝试在Internet Explorer -工作,但我不知道它还能搞砸什么,例如打印..

我的食谱:

<form>
    <input type=hidden name=action value=login> <!-- The magic! -->

    <input type=text name=email>
    <input type=text name=password>

    <input type=submit name=action value=login>
    <input type=submit name=action value="forgot password">
</form>

如果没有一个按钮被“单击”,它将发送默认隐藏字段。

如果单击其中一个,它具有优先级,其值将被传递。

我有一个带有11个提交按钮的表单,当用户按下Enter键时,它总是使用第一个提交按钮。我在别处读到过,在一个表单上有多个提交按钮不是一个好主意(糟糕的做法),最好的方法是将您想要的按钮作为默认按钮,作为表单上唯一的提交按钮。其他按钮应该变成“TYPE=BUTTON”,并添加一个onClick事件,用JavaScript调用自己的提交例程。就像这样:

<SCRIPT Language="JavaScript">
function validform()
{
  // Do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

这里,button3是默认的,尽管您是通过编程方式提交表单和其他按钮,但mjsubmit例程将验证它们。

从HTML 4规范:

如果一个表单包含多个提交按钮,只有激活 提交按钮成功。

这意味着如果有多个提交按钮且没有激活(单击),则没有一个提交按钮会成功。

我认为这是有道理的:

想象一个有多个提交按钮的巨大表单。在顶部,有一个“删除这条记录”按钮,然后有很多输入,在底部有一个“更新这条记录”按钮。当用户在表单底部的字段中按Enter时,他/她永远不会怀疑他/她从顶部隐式地按下了“删除此记录”。

因此,我认为使用用户没有定义(点击)的第一个按钮或任何其他按钮都不是一个好主意。不过,浏览器当然也在这么做。

HTML 4并没有将其显式化。HTML 5规定第一个提交按钮必须是默认的:

4.10.21.2隐式提交 表单元素的默认按钮是按树顺序排列的第一个提交按钮,其表单所有者就是该表单元素。 如果用户代理支持让用户隐式提交表单 (例如,在某些平台上,在输入文本时按下“enter”键 控件隐式地提交表单),然后为 表单,其默认按钮具有激活行为,但没有 禁用时,必须导致用户代理在此触发单击事件 默认按钮。

如果你想在保持视觉顺序的同时影响哪个是“第一个”,那么你可以采取一些方法。

一个屏幕外、无法对焦的按钮。

.hidden-default { 位置:绝对的; 左:-9999 px; } < >形式 <输入名称= " text " > <button name="submit" value="wanted" class="hidden-default" tabindex="-1"></button> <button name="submit" value="not wanted">不是默认值 <button name="submit" value="wanted">看起来像默认的</button> > < /形式

Flexbox顺序:

.ordering { 显示:inline-flex; } . ordered按钮{ 秩序:2; } .订购按钮+按钮{ 顺序:1; } < >形式 <输入名称= " text " > < div class = "排序" > <button name="submit" value="wanted">文件顺序第一个</button> <button name="submit" value="not wanted">在文档顺序中的第2位</button> . </button> . <button name="submit" value="not wanted < / div > > < /形式