Deaktivieren mehrere auf HTML-Formulare einreichen

Question

Wenn mein Benutzer klickt mehr als einmal auf einer Taste eines Formular einreichen, schickt er im Wesentlichen mehr GET / POST-Anfragen (je nach Form Prefs).

Ich finde, dass die Taste ist problematisch, ein bisschen mit JS einreichen zu deaktivieren, denn wenn ein Benutzer versucht, zu stoppen (ESC / Stopp-Taste), es nicht den Knopf zurückgesetzt (es sei denn, Sie fangen, dass Henkel und dass die Verwendung von JS wieder) wenn der Benutzer zurück (back Button) von der nächsten Seite kommt, senden Sie die Taste noch deaktiviert ist (zumindest in Firefox).

Was ist die beste Praxis mehr Formulare abschickt zu deaktivieren.

Danke!

Answer 1

arbeitet Javascript in Ordnung für mich. Sicherzustellen, dass die Taste (n) zurück aktiviert, wenn der Benutzer seine Vorlage bricht Teil der Usability ist.

Wenn Sie nicht möchten, dass Ihre Tasten mit Hilfe von Javascript deaktivieren, dann vielleicht auf dem server Sie doppelte Nachrichten in einem bestimmten Zeitraum fangen könnten?

Answer 2

könnte dies Ihre Frage nicht beantworten, aber ich denke, etwas zu erzeugen, einzigartig die Anfrage auf der Serverseite zu identifizieren, könnte eine bessere Idee. Client-seitige Validierung ist immer problematisch.

Answer 3

binden die disable die in das Formular einreichen und dann seine disable auf die Seite zu laden (neu einstellen, wenn Sie aktualisieren / zurück):

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;