Revisions to Disable submit button on form submit

Added `:input` instead of `input` as mentioned in my comment.

edited Dec 15, 2016 at 13:35

25.4k
21
135
158

Do it onSubmit():

$('form#id').submit(function(){ $(this).find('input[type=submit]'':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.)

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.)

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.)

Switch from attr to prop, as recommended in jQuery 1.6 and above

Source Link

edited Aug 16, 2015 at 2:12

Josh Kelley

58.7k
22
166
259

Do it onSubmit():

$('form#id').submit(function(){ $(this).find('input[type=submit]').attrprop('disabled', '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.)

Do it onSubmit():

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

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.)

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.)

find() is a better alternative than children() as noted in the documentation: The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well

Source Link

edited Aug 6, 2013 at 21:19

rip747

9.4k
8
41
49

Do it onSubmit():

$('form#id').submit(function(){ $(this).childrenfind('input[type=submit]').attr('disabled', 'disabled'); });

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.)

Do it onSubmit():

$('form#id').submit(function(){ $(this).children('input[type=submit]').attr('disabled', 'disabled'); });

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.)

Do it onSubmit():

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

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.)

added 130 characters in body; added 7 characters in body

Source Link

edited Apr 17, 2011 at 2:39

Jared Farrish

49.4k
17
100
108

Loading

Source Link

answered Apr 17, 2011 at 2:33

Jared Farrish

49.4k
17
100
108

Loading

Collectives™ on Stack Overflow

Return to Answer