如何检测表单是如何通过 JavaScript 提交的？答案

【问题标题】：How do I detect how a form was submitted via JavaScript?如何检测表单是如何通过 JavaScript 提交的？
【发布时间】：2011-10-09 02:24:42
【问题描述】：

我有一个带有多个提交按钮的表单，我正在通过 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 的表单，则需要使用并将事件处理程序绑定到要停止提交表单的表单字段。

【问题讨论】：

我遇到了同样的问题，但我没有找到解决办法。

标签： javascript html forms submit

【解决方案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）形式发送。如果按下 enter，则源中的第一个按钮（在本例中为 submit1）被视为默认按钮并被发送。您可以将其设置为 display:none 以用作检测是否按下输入与实际单击提交按钮的虚拟对象。

编辑：

为了响应您的 cmets，要捕获在某些元素中按下回车键，您可以使用 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();
});

【讨论】：

我需要在提交表单之前通过JavaScript检测它。
在 JavaScript 端需要这些数据有什么特别的原因吗？只是想了解您要解决的问题。
Jordan：这是一个非常繁重的 AJAX 应用程序，我有一个动态表单，我可以在提交之前添加元素。用户可以在表单字段中按 Enter 键添加元素，也可以按提交按钮添加元素。
啊，那么捕获可以触发该元素添加的表单字段上的按键事件更有意义。我会将其添加到我的答案中。
所以我一直在测试并将第一个提交按钮更改为 type="button"。连同您的代码一起检测 Enter 按键，我认为它会起作用。

【解决方案2】：

您可以在您感兴趣的每个元素上设置onclick 事件，并为单击的每个元素调用具有不同参数的javascript 函数。

从该函数中，您将按钮的标识符作为参数发送到服务器端

【讨论】：

我还需要检测用户在表单字段中按下“Enter/Return”，所以仅单击是不够的。
这不是一个非常实用的解决方案，因为表单可能包含其他导致回发的控件，如复选框、下拉列表、....
+1 i 使用 onclick 事件是最好的方法。任何可能导致表单提交的按钮都应该有它，以防您想知道单击了哪个按钮
@Ibu - 但有些浏览器会假装点击了提交按钮，即使使用 enter 启动提交也是如此。
如果你有多个提交按钮，我相信你也会捕捉到输入事件@RobG

【解决方案3】：

只需在每个提交按钮上设置一个不同的名称，无论单击哪个按钮，都会与表单一起提交（即其名称/值对）。自 (WWW) 时代开始，表单就一直如此运作。

如果通过回车或其他按键提交表单，no将提交第一个提交按钮名称/值对。

编辑

重新阅读您的问题，您可能想确定表单在发送之前是如何提交的。表单上的单击侦听器可以记住最后一次单击的提交按钮，但在 Firefox 中，在输入中按 enter 会在第一个提交按钮上发送虚假单击，因此您无法检测到它。

我认为除了使用上面建议的基本方法或 Jordan 的隐藏提交按钮之外，您无法可靠地做到这一点。如果您说为什么需要这样做，也许可以提供更多帮助。

【讨论】：

你最后一句话不正确。如果您按 Enter，它会选择源顺序中的第一个提交按钮。
@Jordan - 我的错误。我认为 OP 想从提交事件中找出答案，所以这可能不适合。
看起来这也是我的部分错误。不同浏览器的行为不同，但至少在某些浏览器中它会选择默认提交按钮。

【解决方案4】：

如果您不介意使用 jQuery，这里有一个选项：

示例：http://jsfiddle.net/U4Tpw/

使用类似的东西

$('form').submit(function() {
    // identify the form by getting the id attribute
    handleWhichForm($(this).attr('id'));
});

【讨论】：