CODEWITHSUNDEEP
javascriptjqueryhtml
Subliminal Hash
Subliminal Hash

Reputation: 13744

properly disabling the submit button

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?

Upvotes: 1

Views: 627

Answers (3)

Valery Viktorovsky
Valery Viktorovsky

Reputation: 6726

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

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532435

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.

Upvotes: 1

Oli
Oli

Reputation: 239810

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.

Upvotes: 4

Related Questions