如何在 JavaScript/jQuery 中捕获表单提交操作？答案

【问题标题】：How to catch a form submit action in JavaScript/jQuery?如何在 JavaScript/jQuery 中捕获表单提交操作？
【发布时间】：2015-04-20 13:51:10
【问题描述】：

我有一个用户可以使用以下两个按钮提交的表单：

<input type="submit" name="delete" value="delete" id="deletebutton" class="pure-button">
<input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary">

我有一个 submit 事件侦听器，它加载我需要处理表单的某个函数（表单的 id 为 #submitform）：

document.querySelector('#submitform').addEventListener('submit', function(e) {
    e.preventDefault();
    // Some code goes here
});

但是，此代码仅在单击 #submitbutton 时才会做出反应。单击#deletebutton 时，表单将照常提交。

如何避免这种情况并让另一个函数监听#deletebutton是否被点击？

谢谢！

【问题讨论】：

如果两个按钮都在表单中，那应该可以正常工作
jsfiddle.net/adeneo/od0mbpm8
注意事件监听器没有正确关闭

标签： javascript jquery forms form-submit

【解决方案1】：

你为什么不简单地尝试如下

 $("#submitform").submit(function(event){
    var isValid = true;

    // do all your validation if need here

    if (!isValid) {
        event.preventDefault();
    }
});

确保表单结束标记内的两个按钮 并且您的事件侦听器未正确关闭

 document.querySelector('#submitform').addEventListener('submit', function(e) {
    e.preventDefault();
    // Some code goes here
});

【讨论】：

【解决方案2】：

我会为删除按钮添加另一个侦听器。

document.querySelector('#deletebutton').addEventListener('submit', function(e) {
    e.preventDefault();
    // Some code goes here
    // commonFunct() { ... }
}

如果两个按钮都将执行通用代码/操作，您可以调用一个通用函数，这样您就不必重复自己了。

【讨论】：