web-dev-qa-db-fra.com

Désactiver le bouton après un clic

Je dois désactiver un bouton une fois que l'utilisateur a cliqué dessus pour que l'utilisateur ne puisse plus cliquer dessus plus d'une fois. (Mon application est écrite dans MVC ASP.NET. Je l'ai fait dans une application ASP.NET normale.)

J'ai essayé d'utiliser JavaScript et jQuery et cela ne fonctionne pas. Le bouton est en train de devenir désactivé mais le formulaire n'est pas soumis.

jQuery:

$("#ClickMe").attr("disabled", "disabled");

JavaScript:

function DisableNextButton(btnId) {
    document.getElementById(btnId).disabled = 'true';
}

Les deux méthodes fonctionnent très bien, mais le formulaire ne sera plus envoyé.

javascriptjqueryasp.net-mvc
38
batwadi

jQuery a maintenant la fonction .one() qui limite tout événement donné (tel que "submit") à une seule occurrence.

Exemple:

$('#myForm').one('submit', function() {
    $(this).find('input[type="submit"]').attr('disabled','disabled');
});

Ce code vous permettra de soumettre le formulaire une fois, puis de désactiver le bouton. Remplacez le sélecteur de la fonction find () par le bouton que vous souhaitez désactiver.

Remarque: Per Francisco Goldenstein, j'ai changé le sélecteur en forme et le type d'événement à soumettre. Cela vous permet de soumettre le formulaire à partir de n’importe où (lieux autres que le bouton) tout en désactivant le bouton lors de la soumission.

Remarque 2: Per gorelog, l'utilisation de attr('disabled','disabled') empêchera votre formulaire d'envoyer la valeur du bouton d'envoi. Si vous souhaitez transmettre la valeur du bouton, utilisez plutôt attr('onclick','this.style.opacity = "0.6"; return false;').

47
Preston Badeer

Si, lorsque vous définissez disabled = "disabled" immédiatement après que l'utilisateur a cliqué sur le bouton, et que le formulaire ne soit pas soumis à cause de cela, vous pouvez essayer deux choses:

//First choice [given myForm = your form]:
myInputButton.disabled = "disabled";
myForm.submit()

//Second choice:
setTimeout(disableFunction, 1);  
//so the form will submit and then almost instantly, the button will be disabled

Bien que je parie honnêtement qu'il y aura un meilleur moyen de faire cela, que cela.

11
Warty

jQuery .one() ne doit pas être utilisé avec l'événement click mais avec l'événement submit comme décrit ci-dessous.

 $('input[type=submit]').one('submit', function() {
     $(this).attr('disabled','disabled');
 });
11
Francisco Goldenstein
$("selectorbyclassorbyIDorbyName").click(function () {
  $("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});

sélectionnez le bouton et par son id ou le texte ou la classe ... il désactive juste après le 1er clic et active après 20 Milli s

Fonctionne très bien pour les post backs n placés dans la page maître, s'applique à tous les boutons sans appeler implicitement comme onclientClick

4
Nare Vellela

Utilisez les événements Js modernes, avec "une fois"!

const button = document.getElementById(btnId);
button.addEventListener("click", function() {
    // Submit form
}, {once : true});

// Disabling works too, but this is a more standard approach for general one-time events

Documentation , CanIUse

3
Gibolt
protected void Page_Load(object sender, EventArgs e)
    {
        // prevent user from making operation twice
        btnSave.Attributes.Add("onclick", 
                               "this.disabled=true;" + GetPostBackEventReference(btnSave).ToString() + ";");

        // ... etc. 
    }
1
AbdelMoniem

Pour soumettre un formulaire dans MVC NET Core, vous pouvez soumettre en utilisantINPUT:

<input type="submit" value="Add This Form">

Pour en faire un bouton, j'utilise Bootstrap par exemple:

<input type="submit" value="Add This Form" class="btn btn-primary">

Pour empêcher l'envoi de formulaires en double dans MVC NET Core, vous pouvez ajouter onclick event et utiliser this.disabled = true; pour désactiver le bouton:

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.disabled = true;">

Si vous voulez vérifier d'abord si le formulaire est valide, puis désactiver le bouton, ajoutez this.form.submit (); first, donc si le formulaire est valide, ce bouton sera désactivé, sinon le bouton sera toujours activé pour vous permettre de corriger votre formulaire une fois validé.

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true;">

Vous pouvez ajouter du texte au bouton désactivé pour indiquer que vous êtes en train d'envoyer le formulaire, lorsque toute la validation est correcte, à l'aide de this.value = 'text'; :

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true; this.value = 'Submitting the form';">
1
Robert Stepien

Pour désactiver un bouton d'envoi, il vous suffit d'ajouter un attribut désactivé au bouton d'envoi.

$("#btnSubmit").attr("disabled", true);

Pour activer un bouton désactivé, définissez l'attribut disabled sur false ou supprimez-le.

$('#btnSubmit').attr("disabled", false);

ou

$('#btnSubmit').removeAttr("disabled");
0
KIBOU Hassan

pense simple

<button id="button1" onclick="Click();">ok</button>
<script>
    var buttonClick = false;
    function Click() {
        if (buttonClick) {
            return;
        }
        else {
            buttonClick = true;
            //todo
            alert("ok");
            //buttonClick = false;
        }
    }
</script>

si tu veux courir une fois :)

0
danial y