Perché non il mio post di forma quando devo disattivare il pulsante di invio per evitare un doppio click?

https://stackoverflow.com/questions/400616

03-07-2019
|

Domanda

Come ogni altro sviluppatore web sul pianeta, ho un problema con gli utenti, fare doppio clic sul pulsante di invio i miei moduli.La mia comprensione è che il tradizionale modo per risolvere questo problema, è quello di disabilitare il pulsante immediatamente dopo il primo clic, tuttavia quando faccio questo, non post.

Ho fatto qualche ricerca su questo, dio sa non c'è abbastanza informazioni, ma altre domande come Disattivare il pulsante di invio del form, per disattivare il pulsante sembra funzionare.Il poster originale di Pulsante disattiva dopo l'invio sembra aver avuto lo stesso problema come me, ma non vi è alcuna menzione su come e se ha risolto.

Ecco un po ' di codice su come ripetere (testato in IE8 Beta2, ma avevano lo stesso problema di IE7)

Il mio codice aspx

<%@ 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>

Il mio cs codice

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");
    }
}

Si noti che, quando si fa clic sul pulsante, un postback si verifica, e il tempo è stato aggiornato.Ma quando si controlla la casella di controllo, la prossima volta che si fa clic sul pulsante, il pulsante è disabilitato (come previsto), ma non fa mai il postback.

CHE DIAMINE MI MANCA QUI???

Grazie in anticipo.

Soluzione

Penso che ti manchi questo tag:

UseSubmitBehavior="false"

Provalo in questo modo:

<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"/>

Spiegazione

Altri suggerimenti

fallen888 ha ragione, il tuo approccio non funziona su più browser. Uso questo piccolo frammento per evitare il doppio- fai clic.

UseSubmitBehavior="false" converte il pulsante di invio in pulsante normale (<input type="button">). Se non vuoi che ciò accada, puoi nascondere il pulsante di invio e inserire immediatamente il pulsante disabilitato al suo posto. Perché ciò accade così rapidamente, sembrerà come un pulsante disabilitato per l'utente. I dettagli sono disponibili all'indirizzo il blog di Josh Stodola .

Esempio di codice (jQuery):

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

quot; quot Disattivazione &; I controlli HTML non producono sempre comportamenti coerenti in tutti i principali browser. Quindi provo a stare lontano dal farlo sul lato client, perché (lavorando con il modello ASP.NET) devi tenere traccia dello stato dell'elemento su client e server in quel caso.

Quello che farei è spostare il pulsante dalla parte visibile della finestra cambiando className del pulsante in una classe CSS che contiene quanto segue:

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

Ora, cosa mettere al posto del pulsante?

Un'immagine che sembra un pulsante disabilitato
O solo testo semplice che dice " Attendere ... "

E questo può essere fatto allo stesso modo ma al contrario. Inizia con l'elemento nascosto al caricamento della pagina, quindi passa a un className visibile al momento dell'invio del modulo.

Utilizziamo il seguente script JQuery per disabilitare tutti i pulsanti (tipo di input = invia e pulsante), quando si fa clic su un pulsante .

Abbiamo appena incluso lo script in un file JavaScript globale, quindi non dobbiamo ricordare nulla durante la creazione di nuovi pulsanti.

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

Questo script può essere facilmente esteso con un controllo per Page_ClientValidate ().

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

Questo è il modo corretto e semplice per farlo:

Funziona in tutti i browser (a differenza della soluzione accettata sopra).

Crea un metodo di supporto nella tua applicazione (ad esempio in uno spazio dei nomi Utlity):

    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

Ora dal codice dietro ciascuna delle tue pagine web puoi semplicemente chiamare:

    Utility.PreventMultipleClicks(button1, page)

dove button1 è il pulsante che si desidera impedire più clic.

Ciò che fa è semplicemente impostare il gestore al clic su: this.disabled = true

e quindi aggiunge il gestore post back dei pulsanti, quindi otteniamo:

onclick = quot; this.disabled = true quot ;; __ doPostBack ( 'ID $ ID', '') &; Quot &;

Ciò non interrompe il comportamento predefinito della pagina e funziona in tutti i browser come previsto.

Enjoy!

Ai fini del debug, cosa succede se si mette una clausola else contro if (chk.checked)?

Assicurarsi che la funzione javascript restituisce true (o un valore che potrebbe valutare di boolean true), altrimenti il modulo non presentato.

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
}

PER GLI UTENTI JQUERY

Ti accorgerai di tutti i tipi di problemi che provano ad aggiungere javascript direttamente all'evento onClick sui pulsanti ASP.NET quando si usano i listener di eventi jQuery.

Ho trovato il modo migliore per disabilitare i pulsanti e far funzionare il postback era fare qualcosa del genere:

    $(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;
    });

Dove ValidateForm è la funzione di convalida personalizzata che restituisce vero o falso se il modulo convalida il lato client.

E buttonID è l'id del tuo pulsante come '# button1'

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow