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.

Answer 1

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

Answer 2

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

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

Answer 3

you mean

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

?

Answer 4

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