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>

如何防止表单被多次提交

2 个答案: