How to prevent form from being submitted more than once

Question

I have a form that when you submit takes a second or so to process before redirecting the visitor to another page. In the second they have time to hit the button a couple more times which is obviously not good.

How do I prevent this?

I don't want to use an on click event because I have validators and I don't want the submit button to be disabled before all the fields are validated. So whatever I use needs to be inside the submitHandler of the validation script. Here is my script

<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

Is this what you need? It will disable the button in the beginning and then enables it if the ajax call gives an error.

<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>

Answer 2

You could use a class indicating whether or not to submit. Something like this, assuming submitButton is a jQuery object containing the button:

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
},