it-swarm.com.de

Wie kann ich verhindern, dass Benutzer zweimal auf eine Schaltfläche klicken?

Ich habe eine alte ASP.NET-Webformulare-Anwendung (.NET 2.0), die einen Prozess hat, der etwa 30 Sekunden dauert, wenn eine Schaltfläche angeklickt wird. Ich muss verhindern, dass der Knopf zweimal angeklickt wird. Dadurch wird das Posten zweimal verhindert, was zu doppelten Daten in einer Datenbank führt.

Ich habe versucht, hinzuzufügen;

OnClientClick="this.disabled='true';"

um zu versuchen, die Schaltfläche in JavaScript zu deaktivieren. Obwohl die Schaltfläche deaktiviert wird, funktioniert das Postback für die Schaltfläche jedoch nicht.

Das Deaktivieren der Schaltfläche zum Verhindern mehrerer Übermittlungen ist für diese Anwendung ideal. Wie kann ich das machen?

BEARBEITEN

Ich kann keine Steuerelemente von Drittanbietern verwenden.

44
Richard

Sie müssen true hinter OnClientClick zurückgeben:

OnClientClick="this.disabled='true';return true;"

Alle Klicks auf der Clientseite müssen true zurückgeben, wenn das Postback fortgesetzt werden soll. Dies ist ein Mittel, um clientseitige Validierungen beim Drücken von Tasten bereitzustellen.

23
Mantorok

Wenn Sie die Schaltfläche einfach deaktivieren, wird das Formular von ASP.NET nicht veröffentlicht. Sie möchten auch die clientseitige Validierung durchführen. Hier ist meine Lösung: 

<asp:Button runat="server" ID="btnSave" 
   Text="Save" OnClick="btnSave_Click" 
   OnClientClick="if (!Page_ClientValidate()){ return false; } this.disabled = true; this.value = 'Saving...';" 
   UseSubmitBehavior="false" />

Siehe @Dave Wards Post für eine Beschreibung von UseSubmitBehavior.

Wenn Sie über mehrere Validierungsgruppen verfügen, müssen Sie diese Lösung dafür verbessern. 

76
Rory

Sie müssen auch die UseSubmitBehavior -Eigenschaft des Buttons auf false setzen.

Webbrowser enthalten keine deaktivierten Elemente in den POST - Daten eines Formulars, auch wenn es sich bei dem Element tatsächlich um die Schaltfläche handelt, die die Formularübermittlung überhaupt ausgelöst hat. Leider verwendet ASP.NET WebForms das Formulardesign für einzelne Formulare anhand dieser Informationen, um zu wissen, welches Steuerelement den PostBack ausgelöst hat und welcher Ereignishandler ausgeführt wird (d. H. Button1.On_Click).

Beim Umschalten auf UseSubmitBehavior="false" wird eine __doPostBack('Button1', '') in den clientseitigen Onclick-Handler eingefügt, um das Problem zu umgehen. Selbst wenn Sie den Button deaktivieren, lässt der Parameter __doPostBack ASP.NET wissen, von welchem ​​Steuerelement die PostBack ausgelöst wurde und welche Ereignisse serverseitig ausgelöst werden.

15
Dave Ward

Die meisten der oben genannten Lösungen, die darauf hinweisen, dass das Deaktivieren nicht funktioniert, weil Sie keine PostBack erhalten. Dies ist die einfachste und sauberste Arbeitslösung, die ich je gesehen habe:

OnClientClick="if(this.value === 'Saving...') { return false; } else { this.value = 'Saving...'; }"
10
Mike Socha III

Um alle Probleme der Validierungs- und Validierungsgruppe zu umgehen, fand ich es am einfachsten, das window.onbeforeunload-Ereignis zu verwenden

<script type = "text/javascript">
function DisableButton() {
    document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>

Das obige Skript deaktiviert die ASP.Net-Schaltfläche, sobald die Seite für die Durchführung einer PostBack-Prüfung einschließlich Validierung bereit ist, oder das ASP.Net-Formular wird übermittelt.

Deaktivieren Sie die ASP.Net-Schaltfläche nach dem Klicken, um Doppelklick zu verhindern

8
wezzix

Normalerweise füge ich diese Methode meiner BasePage zur Wiederverwendung hinzu. 

Dieser Code behandelt auch Validierungen

/// <summary>
///  Avoid multiple submit
/// </summary>
/// <param name="button">The button.</param>
/// <param name="text">text displayed on button</param>
public void AvoidMultipleSubmit(Button button,string text="wait..." )
{
    Page.ClientScript.RegisterOnSubmitStatement(GetType(), "ServerForm", "if(this.submitted) return false; this.submitted = true;");
    button.Attributes.Add("onclick", string.Format("if(typeof(Page_ClientValidate)=='function' && !Page_ClientValidate()){{return true;}}this.value='{1}';this.disabled=true;{0}",
        ClientScript.GetPostBackEventReference(button, string.Empty),text));
}
2
giammin

Ich fand diesen Link sehr nützlich, um dieses Problem zu lösen Deaktivieren Sie die ASP.Net-Schaltfläche nach dem Klicken, um ein Doppelklicken zu verhindern

Ich hoffe das kann helfen :)

2
Ahmed Elbatt

Vorteile

  • Funktioniert aus der Box für alle Schaltflächen
    • Auch Schaltflächen, die das Senden nicht ausgelöst haben, werden deaktiviert.
    • LinkButtons werden ebenfalls deaktiviert.
  • Funktioniert mit UpdatePanels (dh partielle und asynchrone Postbacks)
  • Funktioniert für volle Postbacks
  • Deaktiviert keine Schaltflächen, wenn die Überprüfung das Postback verhindert
  • Durch Drücken von Tasten, Eingabetasten und AutoPostBack-Events werden die Tasten deaktiviert

Einschränkungen

† Die meisten anderen Lösungen, die ich gesehen habe, haben dieselben Einschränkungen

  • Stützt sich auf jQuery
  • Funktioniert nur für ASP -Formulare
  • Wenn der Benutzer nach der Übergabe auf die Abbrechen-Schaltfläche des Browsers klickt, kann der Benutzer nicht erneut senden und wird möglicherweise verwirrt.
  • Es gibt noch andere Möglichkeiten, wie ein Benutzer ein Postback initiieren kann:
    • Senden Sie mit der Eingabetaste
    • Autopostback-Ereignisse

Code

Platzieren Sie dieses Snippet vor dem schließenden </body>-Tag am unteren Rand Ihres HTML-Codes.

<script type="text/javascript">
    jQuery(function ($) {

        /*
         * Prevent Double Submit
         * ---------------------
         * Disables submit buttons during form submission and asp async postbacks
         */

        // class name assigned to disabled :submit elements
        var disabledClass = 'asp-postback-disable';

        // selector for buttons and other elements that may cause a postback
        var submittableSelector = [
            'a[href^="javascript:__doPostBack"]',
            ':submit'
        ].join(",");

        // returns false; used to prevent event bubbling
        function returnFalse() { return false; }

        // logs errors
        function error(ex) {
            if (typeof console === 'object' && console.error != null) {
                console.error('Prevent Double Submit Error:', ex);
            }
        }

        // disables :submit elements
        function disableSubmit() {
            try {
                $(submittableSelector, 'form')
                    .addClass(disabledClass)
                    .on('click.asp-postback-disable', returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // enables :submit elements
        function enableSubmit() {
            try {
                $('.asp-postback-disable,' + submittableSelector, 'form')
                    .removeClass(disabledClass)
                    .off('click.asp-postback-disable', returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // Handle async postbacks
        if (typeof Sys === 'object') {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function (s, e) { disableSubmit(); });
            prm.add_endRequest(function (s, e) { enableSubmit(); });
        }
        else {
            error('Sys is undefined.');
        }

        // Handle navigation (eg, Full postback)
        $(window).bind('beforeunload', function (e) {
            disableSubmit();
        });

    });
</script>

<style type="text/css">
    .asp-postback-disable { opacity: 0.25; }
</style>
1
sparebytes

Sie können die Schaltfläche auch ausblenden oder für ein Lade-GIF ändern, um das Feedback beizubehalten

$(document).on('submit','form',function (e) {
    $("input.SubmitButton").hide();
    // or change if to an loading gif image.
    return true;
});
0
EduLopez

Aus einer aspx.cs-Datei können Sie das Skript hinzufügen, um dieses Problem zu beheben (dies ist die einzige Lösung, die für mich gearbeitet hat und von: wexxix bereitgestellt wurde).

//Declaring the string to hold the script
string doubleClickScript = @"<script type='text/javascript'>
                                    function DisableButton() {
                                    document.getElementById('YOURBUTTONID').disabled = true;
                                }
                                window.onbeforeunload = DisableButton;
                                </script>";
//Injecting the script to the aspx page.        
ClientScript.RegisterStartupScript(this.GetType(), "DoubleClickScript", doubleClickScript);

Natürlich können Sie das Skript einfach zur Seite hinzufügen, ich habe es einfach so verwendet, da ich gerade Zugriff auf den Kunden-C # -Code hatte

0
Ernest

Nach dem Anklicken können Sie es auf der Clientseite ausblenden und einige Loader-Bilder anzeigen.

Oder wenn es eine Form oder etwas ist, das Sie recaptcha hinzufügen können

0
Mahesh KP

Nach einer Weile suchte ich diese Lösung.

$('form').submit(function () {
    $('input[type=submit][data-loading]').addClass('disabled');

    if ($(this).data('submitted') == true) {
        $('input[type=submit][data-loading]').attr('disabled', 'disabled');
        return false;
    }

    $(this).data('submitted', true);
});

Das Problem bei der UseDefaultBehavior-Lösung besteht darin, dass die Eingabetaste das Senden des häufig verwendeten Formulars nicht mehr stoppt. Ich gehe davon aus, dass ein beträchtlicher Prozentsatz der Benutzer versucht, statt zu klicken.

0
Fabio Milheiro

Sie können auch irgendwie "hacken", indem Sie eine clientseitige Schaltfläche mit demselben Stil erstellen, die "ursprüngliche" serverseitige Schaltfläche ausblenden und mithilfe von JavaScript die HTML-Schaltfläche deaktivieren oder die ursprüngliche Schaltfläche zum Klicken aufrufen.

Im nächsten Postback wird Ihre Änderung automatisch auf die clientseitige Schaltfläche zurückgesetzt :). 

<asp:Button ID="btnSubmitQuote" class="btn btn-red btn-block" runat="server" Text="Submit Quote" style="display:none;" OnClick="btnSubmitQuote_Click" UseSubmitBehavior="false" />

<button id="btnSubmitQuoteClient"  class="btn btn-red btn-block" onclick ="disableBtn(this);">Submit Quote</button>
<script type="text/javascript">
 function disableBtn(t) {
    t.setAttribute('disabled', 'disabled');
    var btn = document.getElementById('<%=btnSubmitQuote.ClientID %>');
    btn.click();
  }

0
ManNguyenIO