Disattivazione multipla presentare su moduli HTML

Question

Se il mio utente fa clic più di una volta su un pulsante di invio di un modulo, manda in sostanza più richieste GET / POST (a seconda delle preferenze del modulo).

Trovo che disabilitando il pulsante di invio tramite JS è un po 'problematico, perché se un utente tenta di fermare (tasto ESC / Stop), ma non ripristina il pulsante (a meno che non si cattura che e maniglia che l'uso di nuovo JS) , se l'utente ritorna (pulsante Indietro) dalla pagina successiva, il pulsante di invio è ancora disabilitato (almeno in Firefox).

Qual è la migliore pratica per la disattivazione più sottomette forma.

Grazie!

Answer 1

JavaScript funziona bene per me. Fare in modo che il pulsante (s) sono di nuovo abilitata quando l'utente interrompe la sua sottomissione è parte di usabilità.

Se non si desidera disattivare i pulsanti utilizzando JavaScript, allora forse sul lato server che si potrebbe prendere i messaggi duplicati in un certo periodo?

Answer 2

questo potrebbe non rispondere alla tua domanda, ma penso che per generare qualcosa di unico per identificare la richiesta sul lato server potrebbe essere un'idea migliore. validazione lato client è sempre problematico.

Answer 3

vincolare la disabilitazione al di inviare e poi la sua disabilitazione al carico pagina del modulo (per azzerare quando si aggiorna / tornare indietro):

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;