javascript - 避免在我的表单 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 pointed out in his answer :

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