How to prevent the submit button from being hit multiple times

JavaScript
1

I have a multistep form where the page shows one form at a time. If the form validates it hides the first and shows the next form. But i get an error if the user hits submit multiple times. How can I disable the submit button when a valid #step1 is submitted and reactivate it when the next form loads.


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

        $('#step1').bootstrapValidator({
            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) {

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

                  },
                  error: function(){
                    alert("error");
                  }
                });//close ajax
            },
            excluded: ':disabled',
            fields: {
                coverage: {
                    validators: {
                        notEmpty: {
                            message: 'Please select level of coverage'
                        }
                    }
                },
                insuredBy: {
                     message: 'Please Make a Selection',
                     validators: {
                        notEmpty: {
                            message: 'Please Make a Selection'
                        }
                    }
                 }, // end dropdown
                 startDate: {
                     message: 'Please Make a Selection',
                     validators: {
                        notEmpty: {
                            message: 'Please Make a Selection'
                        }
                    }
                 } // end dropdown

            } // end field
        });// bootstrapValidator


        $('#step2').bootstrapValidator({
            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) {

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

                      $.ajax({
                          type: 'POST',
                          url: "scripts/send-vars.php",
                          cache: false,
                          datatype: "html",
                          success: function(data){
                            //alert(data);
                            document.location.href = 'confirmation.php';
                            }
                        });
                  },
                  error: function(){
                    alert("error");
                  }
                });//close ajax
            },
            fields: {
              fname: {
                    validators: {
                        notEmpty: {
                            message: 'The first name is required'
                        }
                    }
              },
              lname: {
                  validators: {
                      notEmpty: {
                          message: 'The last name is required'
                      }
                  }
              },
              email: {
                validators: {
                    // notEmpty: {
                    //     message: 'The value is not a valid email address'
                    // },
                    regexp: {
                        regexp: /^[_a-z0-9-]+(\\.[_a-z0-9-]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,4})$/i,
                        message: 'Please enter a valid email'
                    }
                  }
                },
              phone: {
                  validators: {
                    notEmpty: {
                      message: 'Please enter your phone number'
                    },
                    regexp: {
                        regexp: /^\\D?(\\d{3})\\D?\\D?(\\d{3})\\D?(\\d{4})$/i,
                        message: 'Please enter a valid phone number. Ex: (111) 222-3333 | 1112223333 | 111-222-3333)'
                    }

                  }
              }
            } // end field
        });// bootstrapValidator

    }); //ready(function
    </script>
2

I also have another single step form with the same problem. I read in the api there is a disable method but it doesn’t show an example of how to use it. It looks like i just need something inside the submitHandler: function(validator, form, submitButton) to disable the button when the form is valid for the single step form. On the multistep form we’ll need to re-enable in the success: function(data) block.

Any ideas on the syntax?

3

disabled is an attribute and as such javascript should be able to work with it.

disabled
This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control’s value isn’t submitted with the form.

4

Thanks, but can I get some help on the syntax and where to put it.

5

Never mind I figured it out.
I placed this inside of the submitHandler

document.getElementById("next1").disabled=true;
6

Be sure that if validation fails, you re-enable the button though :slight_smile: