Disable form using jQuery after submission

Question

Is there any way to disable entire form using jQuery after submission?

Answer 1

Sure. Just catch the onsubmit event, submit the form, then do a select on the submit element and set it to disabled. See http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1 for all the exciting details.

Answer 2

$(function() {
    $("#idOfYourSubmitButton").click(function() {
        $(this).attr("disabled","disabled");    
    });
})

but keep in mind that if something goes bad you want to re-enable the button with .removeAttr(“disabled”);

Answer 3

To disable all the form elements in the form (this code will actually disable all input elements in all form tags on the page, so you will want to make the selector more specific).

$(function() {
    $("#idOfYourSubmitButton").click(function() {
        $("form input").attr("disabled","disabled"); 
    });
})

Answer 4

If you only have 1 form on the page (and don't plan on adding one any time soon):

$( function( )
{
     $( 'form' ).submit( function( )
     {
          $( this ).find( 'input, textarea' ).attr( 'disabled', 'disabled' );
     } );
} );

If you need to use an id (<form id="idOfYourSubmitButton">):

$( function( )
{
     $( '#idOfYourSubmitButton' ).submit( function( )
     {
          $( this ).find( 'input, textarea' ).attr( 'disabled', 'disabled' );
     } );
} );