Disable submit button on click after form validation

Question

I have a form, which has a jquery form validation.. what i need is the submit button should get disabled when i submit the form once the validation is done..

<form action="#" method="post" id="myform" name="myform">
    Location: <input name="location" type="text" />
    Site: <input name="site" type="text" />
    Age: <input name="age" type="text" />
    Gender <input name="gender" type="text" />
    <input name="button" type="submit" class="myButton" id="button" value="Submit" />
</form>

here is my form JsFiddle

when you submit a form the page reloads...so i am wondering why do you need to disable the button....anyways either use ajax to post the form or save the button flag in cookie or db and check that — bipen
– bipen, Commented Jul 8, 2013 at 11:23
I haven't tried, because i am not very good in javascript.. Sorry — Oliveshades
– Oliveshades, Commented Jul 8, 2013 at 11:24
This form data is storing in a database its taking 2-3 seconds, in the meantime user is clicking submit button again and again.. due to this i am getting duplicate entries. — Oliveshades
– Oliveshades, Commented Jul 8, 2013 at 11:27
@Ajeesh you need to redirect the user away from the posted values page! header('/same_page.php'); — Zevi Sternlicht
– Zevi Sternlicht, Commented Jul 8, 2013 at 11:30

Zevi Sternlicht · Accepted Answer · 2013-07-08 11:37:02Z

4

Not sure why you want to disable the submit button but using jQuery you could do

$('input[type="submit"]').prop('disabled',true);

Typically you either wouldnt have a submit button, or else submit the form and the page will reload!

UPDATE

To stop people from reposting the values by refreshing the page as you wrote in comments, redirect the user to the page without the values posted!

 header('/same_page.php');

edited Jul 8, 2013 at 11:37

answered Jul 8, 2013 at 11:26

Zevi Sternlicht

5,39921 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rab Over a year ago

is that prop("disabled",true) ?

peter · Accepted Answer · 2013-07-08 11:27:51Z

you want to do the action on form.submit. Not sure if you need to add form.valid() there as a check, but I always do it like that. Afterwards you can return true or false.

True: The browser proceeds with the link and action specified in the form
False: The browser stops (when you have validation errors)

Here the code:

$('#myform').submit(function() {
    if (!$('#myform').valid()) return false;

    $('#myform input[type=submit]').attr("disabled", "disabled");
    return true;
});

I've also updated your fiddle with that code, so you can try it out

Florin Daniel · Accepted Answer · 2013-07-08 11:34:42Z

2

after you validate the form, use:

$( "#button" ).click(function(event) {
        if($('#myform').valid()) {
            $(event.target).attr("disabled", "disabled");
        }
    });

answered Jul 8, 2013 at 11:34

Florin Daniel

151 bronze badge

Comments

Ayyappan Sekar · Accepted Answer · 2013-07-08 11:30:55Z

0

If you want to disable once the form which you want to validate is valid, then you can disable the submit button like this

$("#myForm").validate({
  submitHandler: function(form) {
    // do other stuff for a valid form
    $('#myform input[type=submit]').attr("disabled", "disabled");
    form.submit();
  }
});

answered Jul 8, 2013 at 11:30

Ayyappan Sekar

11.5k2 gold badges22 silver badges22 bronze badges

Collectives™ on Stack Overflow

Disable submit button on click after form validation

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related