如何检测表单是如何通过 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"> 并将事件处理程序绑定到要停止提交表单的表单字段。

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 以用作检测是否按下输入与实际单击提交按钮的虚拟对象。

编辑：

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

Answer 2

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

从那个 function 你将按钮的标识符作为参数发送到服务器端

Answer 3

只需在每个提交按钮上放一个不同的名称，无论单击哪个按钮，都将与表单一起提交（即其名称/值对）。 自（WWW）时间开始以来，Forms 就一直这样工作。

如果表单是通过 enter 或其他按键提交的，则 不会 提交第一个提交按钮名称/值对。

编辑

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

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

Answer 4

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

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

使用类似的东西

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