Question

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

<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？

谢谢！

Answer 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
});

Answer 2

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

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

如果两个按钮都执行常用代码/操作，您可以调用常用功能，这样您就不必重复自己。

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

2 个答案: