properly disabling the submit button

Question

this is the code that 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" />

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

Am I doing something wrong here?

Answer 1

If it's a real form, ie not javascript event handled, this should work.

If you're handling the button with an onClick event, you'll find it probably still triggers. If you are doing that, you'll do better just to set a variable in your JS like buttonDisabled and check that var when you handle the onClick event.

Otherwise try

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

And if after all of that, you're still getting nowhere, you can manually "break" the button using jquery (this is getting serious now):

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

That should stop the button acting like a button.

Answer 2

Depending on how the form submission is handled you might also need to remove any click handlers and/or add one that aborts the submission.

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

You'd have to add the click handler's again when (if) you re-enable the button.

Answer 3

You need to process Back/Prev button into browser. Example bellow

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