Bouton de désactivation lors de la soumission du formulaire

Question

Je souhaite désactiver un bouton lorsque le formulaire est envoyé pour empêcher l'utilisateur de le soumettre plusieurs fois.

J'ai essayé de désactiver naïvement le bouton avec javascript onclick, mais si une validation côté client échoue, le bouton reste désactivé.

Comment désactiver le bouton lorsque le formulaire est soumis avec succès, pas seulement lorsque l'utilisateur clique dessus?

Il s’agit d’un formulaire ASP.NET. Par conséquent, je souhaiterais, si possible, avoir une bonne connexion avec le cycle de vie de la page asp.net ajax.

Answer 1

Faites un tourbillon:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

         // Identify button as a "disabled-when-clicked" button...
         WebHelpers.DisableButtonOnClick( buttonTest, "showPleaseWait" ); 
    }

    protected void buttonTest_Click( object sender, EventArgs e )
    {
        // Emulate a server-side process to demo the disabled button during
        // postback.
        Thread.Sleep( 5000 );
    }
}



using System;
using System.Web;
using System.Web.UI.WebControls;
using System.Text;

public class WebHelpers
{
    //
    // Disable button with no secondary JavaScript function call.
    //
    public static void DisableButtonOnClick( Button ButtonControl )
    {
        DisableButtonOnClick( ButtonControl, string.Empty );    
    }

    //
    // Disable button with a JavaScript function call.
    //
    public static void DisableButtonOnClick( Button ButtonControl, string ClientFunction )
    {   
        StringBuilder sb = new StringBuilder( 128 );

        // If the page has ASP.NET validators on it, this code ensures the
        // page validates before continuing.
        sb.Append( "if ( typeof( Page_ClientValidate ) == 'function' ) { " );
        sb.Append( "if ( ! Page_ClientValidate() ) { return false; } } " );

        // Disable this button.
        sb.Append( "this.disabled = true;" ); 

        // If a secondary JavaScript function has been provided, and if it can be found,
        // call it. Note the name of the JavaScript function to call should be passed without
        // parens.
        if ( ! String.IsNullOrEmpty( ClientFunction ) ) 
        {
            sb.AppendFormat( "if ( typeof( {0} ) == 'function' ) {{ {0}() }};", ClientFunction );  
        }

        // GetPostBackEventReference() obtains a reference to a client-side script function 
        // that causes the server to post back to the page (ie this causes the server-side part 
        // of the "click" to be performed).
        sb.Append( ButtonControl.Page.ClientScript.GetPostBackEventReference( ButtonControl ) + ";" );

        // Add the JavaScript created a code to be executed when the button is clicked.
        ButtonControl.Attributes.Add( "onclick", sb.ToString() );
    }
}

Answer 2

Je ne suis pas un grand fan de l'écriture de tout ce javascript dans le code-behind. Voici à quoi ressemble ma solution finale.

Bouton:

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" OnClientClick="doSubmit(this)" />

Javascript:

<script type="text/javascript"><!--
function doSubmit(btnSubmit) {
    if (typeof(Page_ClientValidate) == 'function' && Page_ClientValidate() == false) { 
        return false;
    }    
    btnSubmit.disabled = 'disabled';
    btnSubmit.value = 'Processing. This may take several minutes...';
    <%= ClientScript.GetPostBackEventReference(btnSubmit, string.Empty) %>;    
}
//-->
</script>

Answer 3

La fonction suivante est utile sans nécessiter la partie de désactivation qui a tendance à être peu fiable. Il suffit d’utiliser & Quot; return check_submit (); & Quot; dans le cadre du gestionnaire onclick des boutons de soumission.

Il devrait également y avoir un champ caché pour contenir la valeur initiale 0 de la forme_submitted;

<input type="hidden" name="form_submitted" value="0">

function check_submit (){
            if (document.Form1.form_submitted.value == 1){
                alert("Don't submit twice. Please wait.");
                return false;
            }
            else{
                document.Form1.form_submitted.value = 1;
                return true;
            }
            return false;
    }

Answer 4

Désactivez le bouton à la toute fin de votre gestionnaire d'envoi. Si la validation échoue, elle devrait retourner false avant cela.

Toutefois, l’approche JavaScript n’est pas fiable, vous devriez donc pouvoir détecter les doublons sur le serveur.

Answer 5

si la validation réussit, désactivez le bouton. si ce n'est pas le cas, alors ne le faites pas.

function validate(form) {
  // perform validation here
  if (isValid) {
    form.mySubmitButton.disabled = true;
    return true;
  } else {
    return false;
  }
}

<form onsubmit="return validate(this);">...</form>

Answer 6

Définissez la visibilité du bouton sur "aucune";

btnSubmit.Attributes("onClick") = document.getElementById('btnName').style.display = 'none';

Non seulement cela empêche la double soumission, mais cela indique clairement à l'utilisateur que vous ne souhaitez pas que le bouton soit enfoncé plus d'une fois.

Answer 7

Je ne sais pas si cela aidera, mais il y a un événement onsubmit dans le formulaire. Vous pouvez utiliser cet événement chaque fois que le formulaire est soumis (à partir de n'importe quel bouton ou contrôle). Pour référence: http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html

Answer 8

Une solution consiste à définir un champ caché lorsque vous cliquez sur le bouton, avec le chiffre 1.

Sur le gestionnaire de clic sur le bouton, la première chose à faire est de vérifier ce numéro s'il ne s'agit pas de 1, il suffit de quitter la fonction.

Answer 9

Vous pourrez également tirer parti de l’événement javascript onsubmit () disponible dans les formulaires. Cet événement se déclenche lorsque le formulaire est soumis et ne doit pas être interrompu tant que la validation n'est pas terminée.

Answer 10

Il s'agit d'une méthode plus simple mais similaire à celle suggérée par rp :

function submit(button) {
        Page_ClientValidate(); 
        if(Page_IsValid)
        {
            button.disabled = true;
        }
}

 <asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_OnClick" OnClientClick="submit(this)" Text="Submit Me" />

Answer 11

Notez que l'approche de rp va soumettre votre formulaire en double si vous utilisez des boutons avec UseSubmitBehavior="false".

J'utilise la variante suivante du code de rp:

public static void DisableButtonOnClick(Button button, string clientFunction)
{
    // If the page has ASP.NET validators on it, this code ensures the
    // page validates before continuing.
    string script = "if (typeof(Page_ClientValidate) == 'function') { "
            + "if (!Page_ClientValidate()) { return false; } } ";

    // disable the button
    script += "this.disabled = true; ";

    // If a secondary JavaScript function has been provided, and if it can be found, call it.
    // Note the name of the JavaScript function to call should be passed without parens.
    if (!string.IsNullOrEmpty(clientFunction))
        script += string.Format("if (typeof({0}) == 'function') {{ {0}() }} ", clientFunction);

    // only need to post back if button is using submit behaviour
    if (button.UseSubmitBehavior)
        script += button.Page.GetPostBackEventReference(button) + "; ";

    button.Attributes.Add("onclick", script);
}

Answer 12

La méthode correcte (du moins en ce qui concerne la convivialité) consiste à désactiver le bouton à l'aide de l'attribut OnClientClick, à effectuer la validation côté client, puis à utiliser le résultat pour poursuivre ou réactiver le résultat. le bouton.

Bien sûr, vous devez ÉGALEMENT écrire du code côté serveur, car vous ne pouvez pas vous fier à la validation même en raison d’un manque ou d’une mise en œuvre particulière de JavaScript. Toutefois, si vous vous en remettez au serveur contrôlant l'état activé / désactivé du bouton, vous ne disposez en principe d'aucun moyen de bloquer l'utilisateur qui soumet le formulaire à plusieurs reprises. Pour cette raison, vous devriez avoir une sorte de logique pour détecter plusieurs soumissions du même utilisateur sur une courte période (valeurs identiques de la même session, par exemple).

Answer 13

une de mes solutions est la suivante:

ajoutez le script dans le chargement de page de votre fichier aspx

    HtmlGenericControl includeMyJava = new HtmlGenericControl("script");
    includeMyJava.Attributes.Add("type", "text/javascript");
    includeMyJava.InnerHtml = "\nfunction dsbButton(button) {";
    includeMyJava.InnerHtml += "\nPage_ClientValidate();";
    includeMyJava.InnerHtml += "\nif(Page_IsValid)";
    includeMyJava.InnerHtml += "\n{";
    includeMyJava.InnerHtml += "\nbutton.disabled = true;";
    includeMyJava.InnerHtml += "}";
    includeMyJava.InnerHtml += "\n}";
    this.Page.Header.Controls.Add(includeMyJava);

puis définissez les paramètres de votre bouton aspx comme suit:

<asp:Button ID="send" runat="server" UseSubmitBehavior="false" OnClientClick="dsbButton(this);" Text="Send" OnClick="send_Click" />

Notez que " onClientClick " permet de désactiver les boutons et & "UseSubmitBehaviour &"; désactive le comportement de soumission traditionnel de la page et permet à asp.net de rendre le comportement de soumission au script utilisateur.

bonne chance

-Waqas Aslam

Answer 14

Je viens juste d’entendre parler de & "DisableOnSubmit &"; propriété d'un < asp: Button > ;, comme ceci:

<asp:Button ID="submit" runat="server" Text="Save"
    OnClick="yourClickEvent" DisableOnSubmit="true" />

Une fois rendu, l'attribut onclick du bouton ressemble à ceci:

onclick="this.disabled=true; setTimeout('enableBack()', 3000);
  WebForm_DoPostBackWithOptions(new
  WebForm_PostBackOptions('yourControlsName', '', true, '', '', false, true))

Et la fonction javascript de "ile enableBack () 'ressemble à ceci:

function enableBack()
{
    document.getElementById('yourControlsName').disabled=false;
}

Ainsi, lorsque le bouton est cliqué, il devient désactivé pendant 3 secondes. Si le formulaire est envoyé avec succès, le bouton n'est pas réactivé. Si, toutefois, des validateurs échouent, le bouton est réactivé après 3 secondes.

Tout cela simplement en définissant un attribut sur le bouton - aucun code javascript ne doit être écrit à la main.

Answer 15

Désactiver simplement le bouton via javascript n'est donc pas une option compatible avec plusieurs navigateurs. Chrome ne soumettra pas le formulaire si vous utilisez simplement OnClientClick="this.disabled=true;"
Vous trouverez ci-dessous une solution que j'ai testée dans Firefox 9, Internet Explorer 9 et Chrome 16:

<script type="text/javascript">
var buttonToDisable;
function disableButton(sender)
{
    buttonToDisable=sender;
    setTimeout('if(Page_IsValid==true)buttonToDisable.disabled=true;', 10);
}
</script>

Enregistrez ensuite 'disableButton' avec l'événement click de votre bouton d'envoi de formulaire, dans un sens:

<asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClientClick="disableButton(this);" />

Il est à noter que cela résout le problème de désactivation du bouton en cas d’échec de la validation côté client. Ne nécessite également aucun traitement côté serveur.

Answer 16

En me basant sur la réponse de @rp., je l'ai modifiée pour invoquer la fonction personnalisée et soumettre et désactiver en cas de succès ou & "; arrêter &"; en cas d'erreur:

public static void DisableButtonOnClick(Button ButtonControl, string ClientFunction)
{
    StringBuilder sb = new StringBuilder(128);

    if (!String.IsNullOrEmpty(ClientFunction))
    {
        sb.AppendFormat("if (typeof({0}) == 'function') {{ if ({0}()) {{ {1}; this.disabled=true; return true; }} else {{ return false; }} }};", ClientFunction, ButtonControl.Page.ClientScript.GetPostBackEventReference(ButtonControl, null));
    }
    else
    {
        sb.Append("return true;");
    }

    ButtonControl.Attributes.Add("onclick", sb.ToString());
}