javascript - 如何检测表单是如何通过 JavaScript 提交的？

Question

我有一个带有多个提交按钮的表单，我正在通过 JavaScript 监听“提交”事件。我想知道哪个提交按钮或表单字段(如果用户按下“Enter/Return”)触发了提交事件。有没有办法获取用户点击或按下“Enter/Return”的 HTML 元素？

更新因为人们不理解我:

这是在 提交表单之前通过 JavaScript 实现的。不允许服务器端检测。我还需要处理通过用户按 Enter 或 Return 键提交的表单。

代码

<form action="" method="POST">
    <input type="text" name="first_name">
    <input type="text" name="item">
    <input type="submit" value="Add item">
    <input type="submit" value="Submit">
</form>

单击“添加项目”或在 name="item"中按 Return/Enter 将添加另一个表单字段。

最后的说明

据我所知，没有办法检测哪个表单域触发了表单提交。如果您需要阻止提交具有多个按钮和/或来自 Enter/Return 的表单，您需要使用 <input type="button"> 并将事件处理程序绑定(bind)到您要停止提交表单的表单字段。

Answer 1

如果你有多个提交按钮，你可以通过给每个按钮一个唯一的名称属性来区分，就像这样:

<input type="submit" name="submit1" value="Submit 1"/>
<input type="submit" name="submit2" value="Submit 2"/>
<input type="submit" name="submit3" value="Submit 3"/>

获得焦点的那个与表单提交一起发送，因此如果您单击名称为“submit2”的那个，它将以 POST(或 GET)的形式出现。如果按下回车键，源中的第一个按钮(在本例中为 submit1)被视为默认按钮并一起发送。您可以将其设置为 display:none 以用作检测是否按下 enter 与实际单击提交按钮的虚拟对象。

编辑:

作为对您评论的回应，要捕获在某些元素中按下的回车键，您可以使用 jQuery 执行此操作。

请注意，您需要提供 first_name 和 add_item id 属性，并将 add_item 变成 type="button"而不是 type="submit"。

HTML:

<form action="" method="POST">
    <input type="text" name="first_name"/>
    <input type="text" id="item" name="item"/>
    <input type="button" id="add_item" value="Add item"/>
    <input type="submit" value="Submit"/>
</form>

JS:

$("#item").keydown(function(event){
    if(event.keyCode == 13) {
        addFields();

        event.preventDefault();
        event.stopPropagation();
    }
});

$("#add_item").click(function(event) {
    addFields();
});