HTML表单上的默认提交按钮是如何确定的?

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

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

当前回答

我使用的另一种解决方案是在表单中只设置一个按钮，并伪造其他按钮。

这里有一个例子:

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

然后我将span元素的样式设置为看起来像一个按钮。JavaScript侦听器观察跨度，并在单击后执行所需的操作。

这并不一定适用于所有情况，但至少很容易做到。

2012-09-28 14:31:55

其他回答

奇怪的是，第一个按钮进入总是第一个按钮，无论是否可见，例如使用jQuery的show/hide()。添加属性。attr('disabled'， 'disabled')可以完全阻止接收输入提交按钮。这是一个问题，例如在调整记录对话框中的插入/编辑+删除按钮可见性时。我发现它不那么hackish和简单的将编辑放在插入前面:

<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="insert">Insert</button>
<button type="submit" name="action" value="delete">Delete</button>

并使用JavaScript代码:

$("#formId button[type='submit'][name='action'][value!='insert']").hide().attr('disabled', 'disabled');
$("#formId button[type='submit'][name='action'][value='insert']").show().removeAttr('disabled');

2015-02-05 18:05:24

我的食谱:

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

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

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

2011-04-07 08:29:08

从你的评论来看:

结果就是，如果你有多个表单提交给同一个脚本，你不能依赖于提交按钮来区分它们。

我在每个表单中放入一个<input type="hidden" value="form_name" />。

如果使用JavaScript提交:将提交事件添加到表单，而不是将事件单击到按钮。精明的用户不会经常触碰鼠标。

2009-05-29 14:15:09

我使用的另一种解决方案是在表单中只设置一个按钮，并伪造其他按钮。

这里有一个例子:

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

然后我将span元素的样式设置为看起来像一个按钮。JavaScript侦听器观察跨度，并在单击后执行所需的操作。

这并不一定适用于所有情况，但至少很容易做到。

2012-09-28 14:31:55

要确定按enter键时按下了哪个按钮，可以用type="submit"标记它，其他按钮用type="button"标记它们。例如:

<input type="button" value="Cancel" />
<input type="submit" value="Submit" />

抱歉，当我写这个答案时，我想的是一般意义上的提交按钮。下面的答案不是关于多个type="submit"按钮，因为它只留下一个type="submit"，而把另一个改为type="button"。我把答案留在这里作为参考，以防帮助可以更改表单类型的人。

2013-05-09 13:34:33

HTML表单上的默认提交按钮是如何确定的?

推荐文章

最新文章

标签