Warum nicht meine Form-Post, wenn ich den Absenden-Button deaktivieren Doppelklick zu verhindern?

https://stackoverflow.com/questions/400616

03-07-2019
|

Frage

Wie jeder andere Web-Entwickler auf dem Planeten, habe ich ein Problem mit dem Benutzer doppelt auf die Schaltfläche auf meine Formulare einreichen klicken. Mein Verständnis ist, dass die herkömmliche Art und Weise, dieses Problem zu umgehen, ist die Taste unmittelbar nach dem ersten Klick zu deaktivieren, aber wenn ich das tue, post it nicht .

habe ich auf diese einige der Forschung, Gott weiß, es gibt genug Informationen, aber auch andere Fragen wie Disable Taste auf Formular Vorlage , erscheint die Schaltfläche deaktivieren zu arbeiten. Das ursprüngliche Plakat von Schaltfläche Deaktivieren nach einreichen erscheint das gleiche Problem wie ich gehabt zu haben, aber es wird nicht erwähnt, wie / ob er es gelöst werden.

Hier ist ein Code auf, wie es zu wiederholen (in IE8 Beta2 getestet, hatte aber gleiches Problem in IE7)

Mein aspx-Code

<%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
    function btn_onClick()
    {
        var chk = document.getElementById("chk");
        if(chk.checked)
        {
            var btn = document.getElementById("btn");
            btn.disabled = true;
        }
    }
</script>
<body>
    <form id="form1" runat="server">
        <asp:Literal ID="lit" Text="--:--:--" runat="server" />
        <br />
        <asp:Button ID="btn" Text="Submit" runat="server" />
        <br />
        <input type="checkbox" id="chk" />Disable button on first click
    </form>
</body>
</html>

Mein cs Code

using System;

public partial class _Default : System.Web.UI.Page 
{
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        btn.Click += new EventHandler(btn_Click);
        btn.OnClientClick = "btn_onClick();";
    }

    void btn_Click(object sender, EventArgs e)
    {
        lit.Text = DateTime.Now.ToString("HH:mm:ss");
    }
}

Beachten Sie, wenn Sie auf die Schaltfläche klicken, wird ein Postback auftritt, und die Zeit aktualisiert wird. Aber wenn Sie das Kontrollkästchen aktivieren, können Sie das nächste Mal auf die Schaltfläche klicken, wird die Schaltfläche deaktiviert ist (wie erwartet), aber nie hat die Postbacks.

Was zum Teufel bin ich hier fehlt ???

Vielen Dank im Voraus.

Lösung

Ich glaube, du nur diesen Tag fehlst:

UseSubmitBehavior="false"

Versuchen Sie es wie folgt aus:

<asp:Button ID="btnUpdate" runat="server" UseSubmitBehavior="false" OnClientClick="if(Page_ClientValidate()) { this.disabled = true; } else {return false;}" Text = "Update" CssClass="button" OnClick="btnUpdate_Click" ValidationGroup="vgNew"/>

Erläuterung

Andere Tipps

fallen888 richtig ist, Ihr Ansatz nicht funktioniert Cross-Browser. Ich benutze diesen kleinen Ausschnitt zu verhindern, doppel- klicken.

UseSubmitBehavior="false" wandelt Submit-Button auf normale Tasten (<input type="button">). Wenn Sie dies nicht passieren wollen, können Sie verbergen Absenden-Button und sofort deaktiviert Taste auf seinem Platz ein. Weil dies so schnell geschieht, wird es aussehen, als Taste deaktiviert Benutzer zu werden. Details sind unter der Blog von Josh Stodola .

Codebeispiel (jQuery):

$("#<%= btnSubmit.ClientID %>").click(function()
{
  $(this)
    .hide()
    .after('<input type="button" value="Please Wait..." disabled="disabled" />');
});

HTML-Steuerelemente „Deaktivieren“ lässt sich nicht immer ein konsistentes Verhalten in allen gängigen Browsern. Also versuche ich zu bleiben weg von dem auf der Client-Seite tun, weil (die Arbeit mit dem ASP.NET-Modell) Sie verfolgt Elements des Staates auf Client und Server in diesem Fall halten müssen.

Was ich tun würde, ist Taste bewegen Sie den sichtbaren Teil des Fensters von der Schaltfläche Klassenname auf eine CSS-Klasse wechseln, das folgendes enthält:

.hiddenButton
{
  position: absolute;
  top: -1000px;
  left: -1000px;
}

Nun, was anstelle der Taste setzen?

Entweder ein Bild, das wie ein behindertes Taste
Oder einfach nur Text, die "Bitte warten ..."

Und das kann auf die gleiche Weise durchgeführt werden, aber in umgekehrter Richtung. Beginnen Sie mit dem Element bei Laden der Seite versteckt und wechseln Sie dann zu einer sichtbaren Klassenname auf Formular aus.

Wir verwenden den folgenden JQuery-Skript deaktivieren alle Tasten (input type = einreichen und Taste), wenn eine Taste geklickt wird.

Wir enthalten nur das Skript in einer globalen JavaScript-Datei, also müssen wir nichts tun, denken Sie daran, wenn neue Schaltflächen zu schaffen.

$(document).ready(function() {
    $(":button,:submit").bind("click", function() {
        setTimeout(function() {
            $(":button,:submit").attr("disabled", "true");
        }, 0);
    });
});

Dieses Skript leicht mit einem Scheck für Page_ClientValidate verlängert werden könnte ().

document.getElementById('form1').onsubmit = function() {
    document.getElementById('btn').disabled = true;
};

Dies ist die korrekte und einfache Möglichkeit, dies zu tun:

Es funktioniert in allen Browsern (anders als die akzeptierte Lösung oben).

Erstellen Sie eine Hilfsmethode in Ihrer Anwendung (zB in einem Utlity Namespace):

    Public Shared Sub PreventMultipleClicks(ByRef button As System.Web.UI.WebControls.Button, ByRef page As System.Web.UI.Page)
        button.Attributes.Add("onclick", "this.disabled=true;" + page.ClientScript.GetPostBackEventReference(button, String.Empty).ToString)
    End Sub

aus dem Code hinter jedem Ihrer Webseiten, die Sie einfach anrufen:

    Utility.PreventMultipleClicks(button1, page)

wo button1 ist die auf die Schaltfläche Sie mehrere Klicks verhindern wollen.

Was dies bedeutet ist, setzt einfach den auf Klick-Handler: this.disabled = true

und fügt dann die Tasten besitzen Post zurück Handler, so erhalten wir:

Onclick = "this.disabled = true"; __ doPostBack ( 'ID $ ID', ''); "

Dies bricht nicht das Standardverhalten der Seite und funktioniert in allen Browsern, wie erwartet.

Genießen Sie!

Für Debug-Zwecke, was passiert, wenn Sie setzen eine else-Klausel gegen die if (chk.checked)?

Stellen Sie sicher, dass Ihre Javascript-Funktion gibt wahr (oder ein Wert, der boolean wahr wäre bewerten), sonst das Formular nicht eingereicht erhalten wird.

function btn_click()
var chk = document.getElementById("chk");
    if(chk.checked)
    {
            var btn = document.getElementById("btn");
            btn.disabled = true;
            return true;   //this enables the controls action to propagate
    }
    else    return false;  //this prevents it from propagating
}

FÜR JQUERY Nutzer

Sie werden in alle möglichen Probleme zu bekommen versuchen Sie Javascript direkt an das OnClick-Ereignis auf ASP.NET Schaltflächen hinzufügen, wenn jQuery Ereignis-Listener verwenden.

ich den besten Weg gefunden Tasten zu deaktivieren und erhalten war das Postbacks zu arbeiten, so etwas zu tun:

    $(buttonID).bind('click', function (e) {

        if (ValidateForm(e)) {

            //client side validation ok!
            //disable the button:
            $(buttonID).attr("disabled", true);

            //force a postback:
            try {
                __doPostBack($(buttonID).attr("name"), "");
                return true;
            } catch (err) {
                return true;
            }

        }
        //client side validation failed!
        return false;
    });

Wo ValidateForm ist Ihre benutzerdefinierte Validierungsfunktion, die wahr oder falsch zurück, wenn Ihr Formular Client-Seite überprüft.

und buttonID ist die ID Ihrer Schaltfläche wie '# button1'

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow