如何防止表单被多次提交

Question

我有一个表单，当您提交时，需要花一秒钟左右的时间才能将访问者重定向到另一个页面。 在第二秒中，他们有时间再按几次按钮，这显然不好。

我该如何预防？

我不想使用on click事件，因为我有验证器，并且我不希望在验证所有字段之前禁用提交按钮。 因此，无论我使用什么，都需要放在验证脚本的SubmitHandler中。 这是我的剧本

<script type="text/javascript">
$(document).ready(function() {

    $('.home1')
      .bootstrapValidator({
        excluded: ':disabled',
        message: 'This value is not valid',
        live: 'disabled',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitHandler: function(validator, form, submitButton) {

          // i think there should be something here to disable the button

          $.ajax({
            type: "POST",
            url: "scripts/process-step1.php",
            data: $('.home1').serialize(),
            success: function(msg){

                document.location.href = 'form.php';

            },
            error: function(){
              alert("error");
            }
          });//close ajax
        },
        fields: {
            zip: {
                message: 'Please enter your zipcode',
                validators: {
                    notEmpty: {
                        message: 'Zipcode Required'
                    },
                    regexp: {
                        regexp: /^\d{5}(?:[-\s]\d{4})?$/i,
                        message: 'Please format zipcode correctly'
                    },
                    remote: {
                        message: 'Please enter a valid Zipcode',
                        url: 'scripts/check_zip.php'
                    }    
                }
            }, // end zip
            product: {
                 message: 'Select a product',
                 validators: {
                    notEmpty: {
                        message: 'Please Make a Selection'
                    }    
                }
             }, // end product
        } // end field
    });// bootstrapValidator
      // get location and add it to hidden field
      var ipLocation = geoplugin_city()+", "+geoplugin_region();
      $('.ipLocation').attr('value', ipLocation);
}); //ready(function
</script>

Answer 1

你可以使用一个class指示是否提交。 像这样，假设submitButton是一个包含按钮的jQuery对象：

submitHandler: function(validator, form, submitButton) {
    if (submitButton.hasClass("submitting"))
        return;

    submitButton.addClass("submitting");

    $.ajax({
        type: "POST",
        url: "scripts/process-step1.php",
        data: $('.home1').serialize(),
        success: function(msg){

            document.location.href = 'form.php';

        },
        error: function(){
            alert("error");
        },
        complete: function()
        {
            submitButton.removeClass("submitting");
        }
    });//close ajax
},

Answer 2

这是您需要的吗？ 它将在开始时禁用该按钮，然后如果ajax调用给出错误，则将其启用。

<script type="text/javascript">
$(document).ready(function() {

    $('.home1')
      .bootstrapValidator({
        excluded: ':disabled',
        message: 'This value is not valid',
        live: 'disabled',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitHandler: function(validator, form, submitButton) {

          $("button-selector").attr("disabled", "disabled");

          $.ajax({
            type: "POST",
            url: "scripts/process-step1.php",
            data: $('.home1').serialize(),
            success: function(msg){

                document.location.href = 'form.php';

            },
            error: function(){
            $("button-selector").removeAttr("disabled");
              alert("error");
            }
          });//close ajax
        },
        fields: {
            zip: {
                message: 'Please enter your zipcode',
                validators: {
                    notEmpty: {
                        message: 'Zipcode Required'
                    },
                    regexp: {
                        regexp: /^\d{5}(?:[-\s]\d{4})?$/i,
                        message: 'Please format zipcode correctly'
                    },
                    remote: {
                        message: 'Please enter a valid Zipcode',
                        url: 'scripts/check_zip.php'
                    }    
                }
            }, // end zip
            product: {
                 message: 'Select a product',
                 validators: {
                    notEmpty: {
                        message: 'Please Make a Selection'
                    }    
                }
             }, // end product
        } // end field
    });// bootstrapValidator
      // get location and add it to hidden field
      var ipLocation = geoplugin_city()+", "+geoplugin_region();
      $('.ipLocation').attr('value', ipLocation);
}); //ready(function
</script>