我有一个带有多个提交按钮的表单,我正在通过 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"> 并将事件处理程序绑定(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)的形式出现。如果按下回车键,源中的第一个按钮(在本例中为 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();
});
关于javascript - 如何检测表单是如何通过 JavaScript 提交的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6757387/