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

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

最佳答案

如果您有多个提交按钮，则可以通过为每个按钮赋予唯一的名称属性来分辨，如下所示:

<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，用作检测是否按下回车键或实际单击提交按钮的虚拟对象。

编辑:

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