La désactivation de multiples soumettre des formulaires HTML

Question

Si mon utilisateur clique sur plus d'une fois sur le bouton d'envoi d'un formulaire, il envoie essentiellement plusieurs requêtes GET / POST (en fonction de la forme prefs).

Je trouve que la désactivation du bouton d'envoi en utilisant JS est un peu problématique, parce que si un utilisateur tente d'arrêter (Bouton ESC / Stop), il ne réinitialise pas le bouton (à moins que vous attrapez que et à manipuler que l'utilisation de nouveau JS) , si l'utilisateur revient (bouton Retour) de la page suivante, le bouton d'envoi est toujours désactivé (au moins dans Firefox).

Quelle est la meilleure pratique pour désactiver forme de multiples soumet.

Merci!

Answer 1

Javascript fonctionne bien pour moi. Faire en sorte que sont de retour sur le bouton activé (s) lorsque l'utilisateur annule sa soumission fait partie de la facilité d'utilisation.

Si vous ne voulez pas désactiver vos boutons en utilisant javascript, alors peut-être sur le Serverside vous pourriez attraper des messages en double dans un certain laps de temps?

Answer 2

cela pourrait ne pas répondre à votre question, mais je pense que pour générer quelque chose d'unique pour identifier la demande du côté du serveur pourrait être une meilleure idée. validation côté client est toujours problématique.

Answer 3

lier le désactiver à soumettre et son désactiver à la charge de la page de la forme (pour réinitialiser lorsque vous actualisez / revenir en arrière):

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;