正确禁用提交按钮

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