Disable the submit button correctly

Question

this is the code i use to disable the button

$("#btnSubmit").attr('disabled', 'disabled') $("#btnSubmit").disabled = true; 

and this is my submit button

 <input id="btnSubmit" class="grayButtonBlueText" type="submit" value="Submit" /> 

button, although it looks disabled, you can still click on it. It is tested with FF 3.0 and IE6

Am I doing something wrong here?

Answer 1

Depending on how the processing of the form is processed, you may also need to remove any click handlers and / or add one that cancels the submission.

 $('#btnSubmit').unbind('click').click( function() { return false; } ); 

You will need to add the click handler again when (if) you turn on the button again.

Answer 2

If it is a real form, i.e. not processed javascript event , this should work.

If you process a button with an onClick event, you will find that it is probably still triggering. If you do this, you better just set the variable in your JS as buttonDisabled, and check that var when you are handling the onClick event.

Otherwise try

 $(yourButton).attr("disabled", "true"); 

And if after all this you still don’t get anywhere, you can manually “break” the button using jquery (now this becomes serious):

 $(submitButton).click(function(ev) { ev.stopPropagation(); ev.preventDefault(); }); 

This should stop the button acting as a button.

Answer 3

You need to process the "Back / Previous" button in the browser. Example below

1) Create form.js:

 (function($) { $.enhanceFormsBehaviour = function() { $('form').enhanceBehaviour(); } $.fn.enhanceBehaviour = function() { return this.each(function() { var submits = $(this).find(':submit'); submits.click(function() { var hidden = document.createElement('input'); hidden.type = 'hidden'; hidden.name = this.name; hidden.value = this.value; this.parentNode.insertBefore(hidden, this) }); $(this).submit(function() { submits.attr("disabled", "disabled"); }); $(window).unload(function() { submits.removeAttr("disabled"); }) }); } })(jQuery); 

2) Add to your HTML:

 <script type="text/javascript"> $(document).ready(function(){ $('#contact_frm ).enhanceBehaviour(); }); </script> <form id="contact_frm" method="post" action="/contact"> <input type="submit" value="Send" name="doSend" /> </form> 

Done :)