避免在我的表单JQuery中双重提交

Question

JSfiddle:CODE

我试图用POST发送信息; 然后我添加了这段代码,在提交一次后禁用按钮:

    $('form').submit(function(){
        $('input[type=submit]', this).attr('disabled', 'disabled');
        return true;
    });

但现在:按钮被禁用,页面被重新加载,但表单没有提交信息...请提供任何解决方案

PS:我需要像上面的代码一样的通用解决方案,我的表单没有id,因为我需要将此函数应用于我的所有表单....

Answer 1

您将事件传递给该处理函数.如果您使用.ajax()POST请求提交表单(请考虑使用.post()),则需要阻止默认行为(即提交表单).

$("form").on("submit", function(e){
  e.preventDefault();
  // Send the form data using .ajax() or .post()
});

如果某人(例如我几周前)建议return false在你的函数结束时,请将它们引用到文章jQuery Events:Stop(Mis)Using Return False(近两年前).

当使用AJAX发送表单时,以及作为常规表单提交时,上述操作会有所帮助.但似乎你的问题是两次(意外或故意)点击提交按钮.正如你在答案中指出的那样,解决方法是在短暂(人)/长(计算机)时间之后停用按钮,正如BalusC在他的回答中指出的那样:

$(document).ready(function () {
    $("form").submit(function () {
        setTimeout(function () {
            $('input[type=submit]').attr('disabled', 'disabled');
        }, 50);
    });
});