Was ist der beste Ansatz zum (clientseitigen) Deaktivieren einer Senden-Schaltfläche?

StackOverflow https://stackoverflow.com/questions/46079

Frage

Einzelheiten:

  • Deaktivieren Sie die Funktion erst, nachdem der Benutzer auf die Schaltfläche „Senden“ geklickt hat, jedoch vor der Veröffentlichung zurück an den Server
  • ASP.NET-Webformulare (.NET 1.1)
  • Bevorzugen Sie jQuery (falls überhaupt eine Bibliothek)
  • Muss aktiviert sein, wenn das Formular neu geladen wird (d. h.Kreditkarte fehlgeschlagen)

Es ist keine Notwendigkeit, dass ich das mache, aber wenn es eine einfache Möglichkeit gibt, es zu machen, ohne zu viel ändern zu müssen, werde ich es tun.(d. h.Wenn es keine einfache Lösung gibt, werde ich es wahrscheinlich nicht tun, also machen Sie sich keine Sorgen, dass Sie zu tief graben.)

War es hilfreich?

Lösung

Für alle Senden-Schaltflächen über JQuery wäre es:

$('input[type=submit]').click(function() { this.disabled = true; });

Oder es könnte sinnvoller sein, dies bei der Formularübermittlung zu tun:

$('form').submit(function() {
    $('input[type=submit]', this).attr("disabled","disabled");
});

Aber ich denke, wir könnten Ihre Frage besser beantworten, wenn wir etwas mehr über den Kontext wüssten.

Wenn es sich um eine Ajax-Anfrage handelt, müssen Sie sicherstellen, dass Sie die Sendeschaltflächen bei Erfolg oder Misserfolg erneut aktivieren.

Wenn es sich um eine Standard-HTTP-Formularübermittlung handelt (abgesehen von der Deaktivierung der Schaltfläche mit Javascript) und Sie dies tun, um sich vor mehreren Übermittlungen desselben Formulars zu schützen, dann sollten Sie eine gewisse Kontrolle im Code haben, der damit umgeht übermittelte Daten, da das Deaktivieren einer Schaltfläche mit Javascript möglicherweise nicht mehrere Übermittlungen verhindert.

Andere Tipps

Sie könnten so etwas tun:

$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

Vorteile davon:

  • Es funktioniert mit allen Ihren Formularen und allen Einreichungsmethoden:
    • Klicken auf ein Submit-Element
    • Drücken Sie die Eingabetaste oder
    • Berufung form.submit() aus einem anderen Code
  • Dadurch werden alle Submit-Elemente deaktiviert:
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • es ist wirklich kurz.

Ich vermute, dass Sie nicht möchten, dass sie während der Verarbeitung der Übermittlung mehr als einmal auf die Schaltfläche „Senden“ klicken.

Mein Ansatz bestand darin, die Schaltfläche einfach vollständig auszublenden und stattdessen eine Art Statusanzeige (animiertes GIF usw.) anzuzeigen.

Hier ist ein sehr konstruiertes Beispiel (es ist technisch gesehen ein Prototyp, aber ich denke, eine JQuery-Version wäre sehr ähnlich):

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>

in JQuery:

$('#SubmitButtonID').click(function() { this.disabled = true; });

Beachten Sie, dass Sie die Schaltfläche vor dem Absenden des Formulars nicht deaktivieren sollten.Wenn Sie die Schaltfläche mithilfe von Javascript im OnClick-Ereignis deaktivieren, geht möglicherweise die Formularübermittlung verloren.

Daher würde ich vorschlagen, dass Sie die Schaltfläche mithilfe von Javascript ausblenden, indem Sie ein Bild darüber platzieren oder die Schaltfläche aus dem sichtbaren Bereich verschieben.Dadurch sollte es möglich sein, dass das Senden des Formulars normal fortgesetzt werden kann.

Es gibt drei Möglichkeiten, ein Formular einzureichen, das abgedeckt werden sollte.Nutzen Sie die Vorschläge von David McLaughlin und Jimmy.Einer deaktiviert das Formularelement der Schaltfläche „Senden“, während der andere das grundlegende Senden des HTML-Formulars deaktiviert.

Zum dritten wird dadurch Javascript nicht daran gehindert, form.submit() auszuführen.Der OnSubmit="return false" Die Methode wird nur angewendet, wenn ein Benutzer auf die Schaltfläche „Senden“ klickt oder in einem Eingabeformularelement die Eingabetaste drückt.Clientseitiges Scripting muss ebenfalls gehandhabt werden.

Wie wäre es mit

Code dahinter:

btnContinue3.Attributes.Item("onclick") = "disableSubmit()"

Javascript:

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

Dies löst nicht das Problem, was passiert, wenn das Postback eine Zeitüberschreitung erfährt, aber ansonsten hat es bei mir funktioniert.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top