asp.net - Was ist der beste Ansatz für die (clientseitige) Deaktivierung einer Submit-Schaltfläche?




4 Answers

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

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

Oder es ist sinnvoller, dies bei der Formularübergabe 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 Zusammenhang wissen.

Wenn es sich um eine AJAX-Anforderung handelt, müssen Sie sicherstellen, dass Sie die Schaltflächen zum Senden erneut aktivieren, entweder bei Erfolg oder Misserfolg.

Wenn es sich um eine standardmäßige HTTP-Formularübermittlung handelt (abgesehen von der Deaktivierung der Schaltfläche mit Javascript) und Sie dies tun, um sich vor mehreren Einsendungen desselben Formulars zu schützen, sollten Sie eine gewisse Kontrolle über den Code haben, übermittelte Daten, da das Deaktivieren einer Schaltfläche mit Javascript möglicherweise mehrere Einreichungen nicht verhindert.

Einzelheiten:

  • Nur deaktivieren, nachdem der Benutzer auf die Schaltfläche zum Senden geklickt hat, jedoch vor dem Zurückgeben auf den Server
  • ASP.NET-Webformulare (.NET 1.1)
  • Bevorzuge jQuery (falls überhaupt eine Bibliothek)
  • Muss aktiviert werden, wenn das Formular neu geladen wird (dh die Kreditkarte ist ausgefallen)

Das ist keine Notwendigkeit, dass ich das tue, aber wenn es einen einfachen Weg gibt, es zu tun, ohne zu viel ändern zu müssen, werde ich es tun. (dh wenn es keine einfache Lösung gibt, werde ich es wahrscheinlich nicht machen, also mach dir keine Sorgen, zu tief zu graben)




Ich vermute, dass Sie nicht mehr als einmal auf die Schaltfläche "Senden" klicken, während die Übergabe ausgeführt wird.

Mein Ansatz bestand darin, die Schaltfläche nur ganz zu verbergen und stattdessen eine Art Statusanzeige (animiertes GIF usw.) anzuzeigen.

Hier ist ein sehr gekünsteltes Beispiel (es ist technisch im 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>



Beachten Sie, dass Sie die Schaltfläche nicht deaktivieren sollten, bevor das Formular gesendet wird. Wenn Sie die Schaltfläche deaktivieren, die Javascript in dem OnClick-Ereignis verwendet, können Sie das Formularsenden verlieren.

Daher würde ich vorschlagen, dass Sie die Schaltfläche mit Javascript ausblenden, indem Sie ein Bild darüber platzieren oder die Schaltfläche aus dem sichtbaren Bereich heraus bewegen. Das sollte es dem Formular ermöglichen, normal weiterzugehen.




Wie wäre es mit

Code hinter :

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-Zeitlimit überschritten wird, aber abgesehen davon funktionierte es für mich.




Related

asp.net javascript jquery webforms .net-1.1