Disable submit button on form submit

I wrote this code to disable submit buttons on my website after the click:

$('input[type=submit]').click(function(){
    $(this).attr('disabled', 'disabled');
});

Unfortunately, it doesn’t send the form. How can I fix this?

EDIT I’d like to bind the submit, not the form 🙂

Answer

Do it onSubmit():

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

What is happening is you’re disabling the button altogether before it actually triggers the submit event.

You should probably also think about naming your elements with IDs or CLASSes, so you don’t select all inputs of submit type on the page.

Demonstration: http://jsfiddle.net/userdude/2hgnZ/

(Note, I use preventDefault() and return false so the form doesn’t actual submit in the example; leave this off in your use.)