Disable submit button when form submit

Question

I am using this validation code, I want to disable submit button when form submit after validation. Submit Button:

<input type="submit" class="submitStandard" value="Save Info" >

Validation code:

<script type='text/javascript'>//<![CDATA[
                $(".submitStandard").on('click', function() {
                    $('form').validate({
                        ignore: [],
                        rules: {
                            required: {
                                required: true
                            },
                            shopname: {
                                required: true
                            }
                        },
                        highlight: function(element) {
                            $(element).closest('.form-group').addClass('has-error');
                        },
                        unhighlight: function(element) {
                            $(element).closest('.form-group').removeClass('has-error');
                        },
                        errorElement: 'span',
                        errorClass: 'help-block',
                        errorPlacement: function(error, element) {
                            if(element.parent('.input-group').length) {
                                error.insertAfter(element.parent());
                            } else {
                                error.insertAfter(element); 
                            }
                        }
                    });
                });//]]>
            </script>

Any best possible solution, submit should be disable when there is not any validation error.

Problem: When I Save info, If I click on submit button twice or three time, It save value twice or three, It should be click once, then it should be disable.

score 1 · Accepted Answer · answered Dec 29 '15 at 09:31

Just add:

$(this).prop("disabled", true);

Full Code:

$(".submitStandard").on('click', function() {
  $(this).prop("disabled", true);
  $('form').validate({
    ignore: [],
    rules: {
      required: {
        required: true
      },
      shopname: {
        required: true
      }
    },
    highlight: function(element) {
      $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
      $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
      if(element.parent('.input-group').length) {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element); 
      }
    }
  });
});

Or on submit event of the <form>:

$('form').submit(function(){
    $(this).find(".submitStandard").prop('disabled', true);
});

Note: I can see that you are using a generic $("form"). This is not recommended since when the JavaScript loads, it blindly applies for all the <form> elements. So it is better to give an id.

score 1 · Answer 2 · answered Dec 29 '15 at 09:35

Make use of submitHandler property of validate as below:

$(".submitStandard").on('click', function() {
  var button=$(this);
  $('form').validate({
    ignore: [],
    rules: {
      required: {
        required: true
      },
      shopname: {
        required: true
      }
    },
    //.. Other properties
    //..
    submitHandler: function(form) {
         if(form.valid()) //check if form is valid?
         {
             button.prop("disabled", true);
         }
    },
    //..
  });
});

score 1 · Answer 3 · answered Dec 29 '15 at 15:09

1

HTML:

<form id="registrationfrm" method="post">
<input type="submit" id="submitbtn" name="submit" value='SAVE' /> 
</form>

Jquery:

$("#registrationfrm").on("submit",function(){
$("#submitbtn").prop('disabled', true);
});

answered Dec 29 '15 at 15:09

Maheskumar

129
8

score 0 · Answer 4 · edited May 23 '17 at 10:27

0

You can try so-

$('form#id').submit(function(){
    $(this).find('input[type=submit]').prop('disabled', true);
});

How can I disable/enable submit button after jQuery Validation?

edited May 23 '17 at 10:27

Community

1
1

answered Dec 29 '15 at 09:33

Sanjuktha

1,035
3
13
24

Disable submit button when form submit

4 Answers4