Question

我有一些代码，我试图阻止多次提交表单。我在另一个Stack线程上找到了这个代码，但它不起作用。相反，它无限次地提交表单并且滞后于整个服务器！

$(document).ready(function() {
    $('form').submit(function() {
        console.log("hi")
        if ($(this).valid()) {
            $(this).submit(function(){
                return false;
            });
            return true; //Tried with an without
        }
    });
});

以下是控制台中输出的图片：

继续提交表格。我只是在那个号码上拍了一张照片。

我找到上面代码的帖子是this question上接受的答案，它有许多赞成。

请注意，每页有多个表单，许多表单都有多个表单！对一种特定形式的解决方案是不够的。我需要全球解决方案。我也使用Codeigniter。

Answer 1

您需要取消初始表单提交，以便您在验证后才能执行此操作。但坦率地说，如果表单无效，HTML5将不会提交，因此您的代码似乎是多余的。

这是一个工作示例，它将大部分JQuery排除在外。它只提交表格一次。

您也可以在此处测试：https://jsfiddle.net/5oyp6aa0/6/

$(function() {
    var theForm = document.querySelector("form");
    theForm.addEventListener("submit",function(evt) {
        // First, cancel the form's submission:
        evt.preventDefault();
        evt.stopPropagation();
        console.log("Navitve Submit Cancelled")
        if (theForm.checkValidity()) {
            // Then, only if it's valid, submit
            console.log("Manual Submit Triggered");
            theForm.submit();
        }
    });

});

Answer 2

尝试传递事件并使用e.preventDefault（）

$(document).ready(function() {
    $('form').submit(function(e) {
        e.preventDefault();
        console.log("hi")
        if ($(this).valid()) {
            $(this).submit(function(){
                return false;
            });
        }
    });
});

Answer 3

如果我错了，请纠正我，但是如果它有效则不应该return;，否则就像在jQuery文档{{3}中一样停止提交}。

$(document).ready(function() {
    $('form').submit(function(event) {
        console.log("hi")
        if ($(this).valid()) {
            return;
        }
        event.preventDefault();
    });
});

Answer 4

在这些答案都没有奏效后，我决定再拍一次。这对我有用。

$(document).ready(function() {
    $("form").submit(function (e) {
        var attr = $(this).attr('submitted');
        if (typeof attr === typeof undefined || attr === false) {
            if ($(this).valid()) {
                $(this).attr('submitted', 'submitted');
                $(this).submit();
            } else {
                e.preventDefault();
            }
        } else {
            e.preventDefault();
        }
    });
});

防止表单多次提交

4 个答案: