How to disable submit button after click submit button

Question

I have created forms using php and using jquery for validation.What i exactly need is if validation successful on submit button, disable the submit button till submission gets over.Here is my code:

  if(document.location.pathname == "/contact-us"){
            $("#form-contact-user").validate({
                    ignore: [],
                    rules: {
                        name:{
                            required: true
                        },email: {
                            email: true
                        },
                        phne: {
                            phnDash: true
                        },
                        zip: {
                        zipcode: true
                        }
                    },
                    errorPlacement: function(error, element) {
                        if (element.attr("type") == "checkbox") {
                            error.appendTo( element.parent().parent().parent(".form-checkboxes"));
                        }
                        else if (element.attr("name") == "mailing_address") 
                        {
                         error.appendTo(element.parent().parent().parent());
                        }
                        else{
                            error.insertAfter(element);
                        }
                    }
            });

http://stackoverflow.com/questions/16777003/what-is-the-easiest-way-to-disable-enable-buttons-and-links-jquery-bootstrap — jrook, Apr 10 '17 at 09:42
you can use success: function(label){ $('#btnId').attr('disabled', true); } — Youddh, Apr 10 '17 at 09:51
Possible duplicate of [What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)](http://stackoverflow.com/questions/16777003/what-is-the-easiest-way-to-disable-enable-buttons-and-links-jquery-bootstrap) — mxr7350, Apr 10 '17 at 09:51

score 0 · Answer 1 · answered Apr 10 '17 at 09:45

0

Try this:

$('#btnId').attr('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="submit" id="btnId" value="Submit">

answered Apr 10 '17 at 09:45

Mayank Pandeyz

25,704
4
40
59

gaetanoM · Answer 2 · 2017-04-10T18:50:33.050

According to the documentation you can use:

submitHandler (default: native form submit):

Callback for handling the actual submit when the form is valid.

ANSWER UPDATED

From your comment:

Getting the following error:-Uncaught TypeError: Cannot read property 'call' of undefined

This message depends on your rules. Because I don't know anything about your html I can also assume a possible structure in the following snippet:

$("#form-contact-user").validate({
  debug: true,
  rules: {
      name: {
          required: true,
          minlength: 2
      },
      email: {
          required: true
      },
      phone: {
          required: true
      },
      zip: {
          required: true
      }
  },
  errorPlacement: function (error, element) {
      if (element.attr("type") == "checkbox") {
          error.appendTo(element.parent().parent().parent(".form-checkboxes"));
      }
      else if (element.attr("name") == "mailing_address") {
          error.appendTo(element.parent().parent().parent());
      }
      else {
          error.insertAfter(element);
      }
  },
  submitHandler: function(form) {
      // do other things for a valid form
      $(form).find(':submit').prop('disabled', true);
      setTimeout(function() {
          form.submit();
      }, 1000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>


<form id="form-contact-user" method="get" action="">
    <fieldset>
        <legend>Please provide your name, email address, phone number and zipcode</legend>
        <p>
            <label for="name">Name (required, at least 2 characters)</label>
            <input id="name" name="name" type="text">
        </p>
        <p>
            <label for="email">E-Mail (required)</label>
            <input id="email" type="email" name="email">
        </p>
        <p>
            <label for="phone">Phone Number (required)</label>
            <input id="phone" type="text" name="phone">
        </p>
        <p>
            <label for="zip">Zip code (required)</label>
            <textarea id="zip" name="zip"></textarea>
        </p>
        <p>
            <input class="submit" type="submit" value="Submit">
        </p>
    </fieldset>
</form>

I have tried this one.Its working fine when the js file not have errorPlacement: function(error, element) {}. — , Apr 10 '17 at 09:54
@ancy Could you take a look to this [jsfiddle](https://jsfiddle.net/vyaw3ucd/5/)? It is quite similar. — gaetanoM, Apr 10 '17 at 10:04
Getting the following error:-Uncaught TypeError: Cannot read property 'call' of undefined — , Apr 10 '17 at 10:08
@ancy Answer updated. Like you can see the **submitHandler** works! Let me know. — gaetanoM, Apr 10 '17 at 18:52

score 0 · Answer 3 · answered Apr 10 '17 at 09:50

I hope this is what you are looking for,

$('#submitBtn').click(function(event) {
  //event.preventDefault();
  $(this).attr('disabled', true);
  //Perform Validation
  //if(valid) {
  //  $("#form-contact-user").submit();
  //}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="submit" id="submitBtn" value="Submit">

How to disable submit button after click submit button

3 Answers3