如何检测表单是如何通过JavaScript提交的?

How do I detect how a form was submitted via JavaScript?

本文关键字：何通过 JavaScript 提交 表单 何检测 检测      更新时间：2023-09-26

我有一个有多个提交按钮的表单，我正在通过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>

点击'Add Item'或回车回车inside name=" Item "将添加另一个表单字段。

据我所知，没有一种方法可以检测哪个表单字段触发了表单提交。如果你需要避免提交一个有多个按钮的表单和/或输入/返回，你需要使用并将事件处理程序绑定到要停止表单提交的表单字段。

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

<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来检测是否按下了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();
});

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

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

只需在每个提交按钮上放置不同的名称，单击哪个按钮将与表单一起提交(即其名称/值对)。从WWW时代开始，表单就是这样工作的。

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

编辑

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

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

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

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

使用类似

的内容
$('form').submit(function() {
    // identify the form by getting the id attribute
    handleWhichForm($(this).attr('id'));
});
相关文章：