Disabling multiple submit on HTML forms

Question

If my user clicks more than once on a submit button of a form, he essentially sends multiple GET/POST requests (depending on the form prefs).

I find that disabling the submit button using JS is a bit problematic, because if a user tries to stop (ESC/Stop Button), it doesn't reset the button (unless you catch that and handle that using JS again), if the user comes back (Back Button) from the next page, the submit button is still disabled (at least in Firefox).

What is the best practice for disabling multiple form submits.

Thanks!

Answer 1

Javascript works fine for me. Making sure that the button(s) are back enabled when the user aborts his submission is part of usability.

If you don't want to disable your buttons using javascript, then maybe on the serverside you could catch duplicate messages in a certain timespan?

Answer 2

this might not answer your question, but i think to generate something uniq to identify the request on the server side might be a better idea. client side validation is always problematic.

Answer 3

bind the disable to the form's submit and then its disable to the page load (to reset when you refresh / go back):

function disableSubmits( domNode, toDisable )
{
    domNode = domNode || document.getElementsByTagName( 'body' )[ 0 ];

    toDisable = !!toDisable;

    for( var i = 0; i < inputs.length; ++i )
    {
        if( 'submit' === inputs[i].getAttribute( 'type' ) )
        {
            inputs[i].disabled = toDisable;
        }
    }
}

var onloadhandler = function( )
{
    var theForm = document.getElementById( 'theForm' );

    theForm.onsubmit = function( ){ disableSubmits( theForm, true ); }

    disableSubmits( theForm, false );
};

var old = window.onload;

window.onload =  'function' === typeof old
                 ? function( ){ old(); onloadhandler(); }
                 : onloadhandler;