Pourquoi mon formulaire ne s'affiche-t-il pas lorsque je désactive le bouton d'envoi pour empêcher le double-clic?

https://stackoverflow.com/questions/400616

03-07-2019
|

Question

Comme tous les autres développeurs Web de la planète, un problème survient lorsque les utilisateurs cliquent deux fois sur le bouton d'envoi de mes formulaires. Si j'ai bien compris, la méthode classique pour traiter ce problème consiste à désactiver le bouton immédiatement après le premier clic. Toutefois, lorsque je le fais, il ne publie pas .

J'ai fait des recherches à ce sujet. Dieu sait qu'il y a assez d'informations, mais d'autres questions telles que Désactiver bouton lors de la soumission du formulaire , la désactivation du bouton semble fonctionner. L’affiche originale du bouton Désactiver après l'envoi semble avoir eu le même problème que moi, mais il y a Il n’ya aucune mention sur comment / s’il l’a résolu.

Voici un code sur la façon de le répéter (testé dans IE8 Beta2, mais avait le même problème dans IE7)

Mon code 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>

Mon code cs

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

Notez que lorsque vous cliquez sur le bouton, une publication se produit et l'heure est mise à jour. Mais lorsque vous cochez la case, la prochaine fois que vous cliquerez sur le bouton, celui-ci sera désactivé (comme prévu), mais jamais la publication.

CE QUE CACHET JE ME MANQUE ICI ???

Merci d'avance.

La solution

Je pense que vous manquez juste cette balise:

UseSubmitBehavior="false"

Essayez comme ça:

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

Explication

Autres conseils

fallen888 a raison, votre approche ne fonctionne pas avec plusieurs navigateurs. J'utilise ce petit extrait pour éviter les doubles cliquez.

UseSubmitBehavior="false" convertit le bouton d'envoi en bouton normal (<input type="button">). Si vous ne voulez pas que cela se produise, vous pouvez masquer le bouton d'envoi et insérer immédiatement le bouton désactivé à sa place. Parce que cela se produit si rapidement, cela ressemblera à un bouton qui devient désactivé pour l'utilisateur. Les détails sont sur le blog de Josh Stodola .

Exemple de code (jQuery):

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

" Désactivation de " Les contrôles HTML ne produisent pas toujours un comportement cohérent dans tous les principaux navigateurs. J'essaie donc d'éviter cela du côté client, car (en utilisant le modèle ASP.NET), vous devez suivre l'état de l'élément sur le client et le serveur dans ce cas.

Ce que je ferais, c’est de déplacer le bouton de la partie visible de la fenêtre en remplaçant son nom de classe par une classe CSS contenant les éléments suivants:

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

Maintenant, que faut-il mettre à la place du bouton?

Soit une image qui ressemble à un bouton désactivé
Ou tout simplement un texte en clair qui dit & "Veuillez patienter ... &";

Et cela peut se faire de la même manière mais en sens inverse. Commencez avec l'élément masqué au chargement de la page, puis passez à un nom de classe visible lors de l'envoi du formulaire.

Nous utilisons le script JQuery suivant pour désactiver tous les boutons (type d'entrée = soumettre et bouton) lorsque vous cliquez sur un bouton .

Nous venons d'inclure le script dans un fichier JavaScript global, nous n'avons donc pas à nous souvenir de rien lors de la création de nouveaux boutons.

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

Ce script pourrait facilement être étendu avec une vérification pour Page_ClientValidate ().

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

C’est le moyen simple et correct de procéder:

Cela fonctionne dans tous les navigateurs (contrairement à la solution acceptée ci-dessus).

Créez une méthode d'assistance dans votre application (dans un espace de noms Utlity, par exemple):

    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

À partir du code situé derrière chacune de vos pages Web, vous pouvez simplement appeler:

    Utility.PreventMultipleClicks(button1, page)

où button1 est le bouton pour lequel vous souhaitez empêcher plusieurs clics.

Cela permet simplement de définir le gestionnaire de clic sur: this.disabled = true

et ajoute ensuite les boutons propres au gestionnaire de post-back, nous obtenons donc:

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

Cela ne rompt pas le comportement par défaut de la page et fonctionne dans tous les navigateurs comme prévu.

Profitez!

À des fins de débogage, que se passe-t-il si vous placez une clause else contre le if (chk.checked)?

Assurez-vous que votre fonction javascript renvoie la valeur true (ou une valeur qui donnerait la valeur booléen true), sinon le formulaire ne sera pas soumis.

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
}

POUR LES UTILISATEURS JQUERY

Vous rencontrerez toutes sortes de problèmes en essayant d’ajouter du code javascript directement à l’événement onClick sur les boutons ASP.NET lors de l’utilisation des écouteurs d’événements jQuery.

J'ai trouvé le meilleur moyen de désactiver les boutons et de faire en sorte que la publication fonctionne comme ceci:

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

Où ValidateForm est votre fonction de validation personnalisée qui renvoie true ou false si votre formulaire valide le côté client.

Et buttonID est l'identifiant de votre bouton, tel que "# button1"

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow