Disable Jquery UI Button on form submit

Question

I have a form like so:

<form action="" method="post" id="form" name="form" enctype="multipart/form-data">
<input name="action" type="submit" value="Send" />
</form>

I am using the latest version of the Jquery UI Button plugin. The value of the submit button MUST be submitted. Is there an easy way to disable the submit button after the form has been submitted, without using additional plugins such as "Lock Submit" - http://plugins.jquery.com/project/LockSubmit ?

Many thanks.

I think the form won't post the value of the submit button when it is disabled. Is this the problem? — Salman Arshad
– Salman Arshad, Commented Jul 9, 2011 at 14:00
Yeah - I think the only way of doing it reliably is using Lock Submit but I just wondered if the Jquery UI library catered for this instead. — David
– David, Commented Jul 9, 2011 at 14:08

Salman Arshad · Accepted Answer · 2014-01-21 09:21:57Z

3

When you set the disabled property of an element, it won't be submitted. The workaround is to set the disabled property after the form is submitted. You can use the setTimeout() function with a very short delay:

$("#form").submit(function() {
    setTimeout(function() {
        // .prop() requires jQuery 1.6 or higher
        $("#form :submit").prop("disabled", true);
    }, 100);
});

Demo here

Another trick, is to use a trick :) You can wrap the original submit button inside a div and hide it when the form submits.

Demo here

edited Jan 21, 2014 at 9:21

answered Jul 9, 2011 at 14:16

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

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

1 Comment

David Over a year ago

I decided to go with the "trick" option as it is basically doing the same thing as "Lock Submit" without the hassle of using their library.

Cengiz Önkal · Accepted Answer · 2011-08-02 13:30:07Z

3

Easy just add type="button" to button attributes like

<button type="button" >not submit</button>

answered Aug 2, 2011 at 13:30

Cengiz Önkal

1581 silver badge8 bronze badges

Comments

zb' · Accepted Answer · 2011-07-09 13:30:39Z

0

you mean

$('#form').submit(function() {$(this).find('input:[type="submit"]').button({disabled:true})});

?

answered Jul 9, 2011 at 13:30

zb'

8,0793 gold badges44 silver badges68 bronze badges

Comments

Dogbert · Accepted Answer · 2011-07-09 13:35:40Z

0

$('#form').submit(function() {
  $(this).find('input[type="submit"]').disable();
});

answered Jul 9, 2011 at 13:35

Dogbert

224k43 gold badges419 silver badges416 bronze badges

Collectives™ on Stack Overflow

Disable Jquery UI Button on form submit

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related