Question

我有一个包含多个提交按钮的表单，我正在通过JavaScript监听'submit'事件。我想知道哪个提交按钮或表单字段（如果用户按下'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>

点击“添加项目”或按回车/输入名称=“项目”将添加另一个表单字段。

最后的注释

据我所知，没有办法检测哪个表单字段触发了表单提交。如果您需要阻止提交具有多个按钮和/或Enter / Return的表单，则需要使用＆lt; input type =“button”＆gt;并将事件处理程序绑定到要停止表单提交的表单字段。

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函数。

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

Answer 3

只需在每个提交按钮上添加一个不同的名称，无论哪个被点击，都会与表单一起提交（即名称/值对）。自（WWW）时代开始以来，表格就像这样工作。

如果通过输入或其他按键对表单进行汇总， no 将提交第一个提交按钮名称/值对。

修改

重新阅读您的问题，您可能想要确定表单在发送之前的提交方式。表单上的单击侦听器可以记住单击的最后一个提交按钮，但在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'));
});

如何通过JavaScript检测表单的提交方式？

4 个答案:

修改