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

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

当前回答

我认为这篇文章会帮助如果有人想用jQuery:

http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/

基本解决方案是:

$(function() {
    $("form input").keypress(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $('input[type=submit].default').click();
        return false;
    }
    else {
        return true;
    }
    });
});

另一个我喜欢的是:

jQuery(document).ready(function() {
    $("form input, form select").live('keypress', function (e) {
        if ($(this).parents('form').find('button[type=submit].default, input[type=submit].default').length <= 0)
            return true;

        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            $(this).parents('form').find('button[type=submit].default, input[type=submit].default').click();
            return false;
        }
        else {
            return true;
        }
    });
});

其他回答

当您在一个表单中有多个提交按钮,并且用户按Enter键从文本字段提交表单时,这段代码将通过从按键事件调用表单上的提交事件来覆盖默认功能。代码如下:

$('form input').keypress(function(e){

    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)){
        $(e.target).closest('form').submit(); return false;
    }
    else
        return true;
});

从你的评论来看:

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

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

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

奇怪的是,第一个按钮进入总是第一个按钮,无论是否可见,例如使用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');

从HTML 4规范:

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

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

我认为这是有道理的:

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

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

我的食谱:

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

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

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