web-dev-qa-db-fra.com

Comment désactiver le bouton d'envoi une fois qu'il a été cliqué?

J'ai un bouton d'envoi à la fin du formulaire.

J'ai ajouté la condition suivante au bouton d'envoi:

onClick="this.disabled=true;
this.value='Sending…';
this.form.submit();"

Mais lorsqu'il passe à la page suivante, les paramètres ne sont pas passés et les valeurs NULL sont passées.

javascriptjqueryhtmljspform-submit
34
maas

Vous soumettez probablement le formulaire deux fois. Supprimez la this.form.submit() ou ajoutez return false à la fin.

vous devriez vous retrouver avec onClick="this.disabled=true; this.value='Sending…';"

40
migajek

Vous devez d’abord soumettre votre formulaire, puis modifier la valeur de votre soumission:

onClick="this.form.submit(); this.disabled=true; this.value='Sending…'; "
75
Andreas Köberle

testé sur IE11, FF53, GC58:

onclick="var e=this;setTimeout(function(){e.disabled=true;},0);return true;"
6
user8161358

l'astuce consiste à retarder la désactivation du bouton et à soumettre le formulaire que vous pouvez utiliser window.setTimeout('this.disabled=true',0); yes

5
Frenchi In LA

En utilisant JQuery, vous pouvez le faire ..

$("#submitbutton").click(
   function() {
      alert("Sending...");
      window.location.replace("path to url");
   }
);
4
Manie

Vous devez désactiver le bouton dans l'événement onsubmit du <form>:

<form action='/' method='POST' onsubmit='disableButton()'>
    <input name='txt' type='text' required />
    <button id='btn' type='submit'>Post</button>
</form>

<script>
    function disableButton() {
        var btn = document.getElementById('btn');
        btn.disabled = true;
        btn.innerText = 'Posting...'
    }
<script>

Remarque: de cette façon, si vous avez un élément de formulaire avec l'attribut required, cela fonctionnera.

3
A-Sharabiani

Je ne pense pas que vous ayez besoin de this.form.submit(). Le code de désactivation doit s'exécuter, puis il passera sur le clic qui cliquera sur le formulaire.

2
Mitch Dempsey

Une autre solution que j'ai utilisée consiste à déplacer le bouton au lieu de le désactiver. Dans ce cas, vous ne rencontrez pas ces problèmes de "désactivation" ... __ Enfin, ce que vous voulez vraiment, c’est que les gens n’appuyent pas deux fois, sinon le bouton est absent.

Vous pouvez également le remplacer par un autre bouton.

1
Desarrollo Aplicaciones
function xxxx() {
// submit or validate here , disable after that using below
  document.getElementById('buttonId').disabled = 'disabled';
  document.getElementById('buttonId').disabled = '';
}
1
user3060544

Si vous désactivez le bouton, sa paire nom = valeur ne sera en effet pas envoyée en tant que paramètre. Mais le reste des paramètres doit être envoyé (tant que leurs éléments d'entrée respectifs et le formulaire parent ne sont pas désactivés). Vous ne testez probablement que le bouton ou les autres champs de saisie ou même le formulaire sont désactivés?

1
BalusC

Voici un exemple en passant qui développe la solution d'Andreas Köberle. Il utilise jQuery pour le gestionnaire d'événements et l'événement document ready, mais ceux-ci peuvent être basculés sur JS simple:

(function(document, $) {

  $(function() {
    $(document).on('click', '[disable-on-click], .disable-on-click', function() {
      var disableText = this.getAttribute("data-disable-text") || 'Processing...';

      if(this.form) {
        this.form.submit();
      }

      this.disabled = true;

      if(this.tagName === 'BUTTON') {
        this.innerHTML = disableText;
      } else if(this.tagName === 'INPUT') {
        this.value = disableText;
      }
    });
  });

})(document, jQuery);

Il peut ensuite être utilisé en HTML comme ceci:

<button disable-on-click data-disable-text="Saving...">Click Me</button>
<button class="disable-on-click">Click Me</button>
<input type="submit" disable-on-click value="Click Me" />
0
stephen.hanson

Dans mon cas, c'était nécessaire.

Désactiver le bouton de soumission du formulaire de soumission

Cela fonctionne bien dans Internet Explorer et Firefox sans cela, mais cela ne fonctionnait pas dans Google Chrome.

Le problème est que vous désactivez le bouton avant qu'il puisse réellement déclencher l'événement submit.

0
Pascal Desjardins

Votre question est déroutante et vous devriez vraiment poster du code, mais cela devrait fonctionner:

onClick="this.disabled=true; this.value='Sending...'; submitForm(); return false;"

Je pense que lorsque vous utilisez this.form.submit(), il fait ce qui se passe naturellement lorsque vous cliquez sur le bouton d'envoi. Si vous souhaitez soumettre la même page, vous devriez envisager d'utiliser AJAX dans la méthode submitForm() (ci-dessus).

De plus, renvoyer false à la fin de la valeur de l'attribut onClick supprime le déclenchement de l'événement par défaut (dans ce cas, l'envoi du formulaire).

0
TJ Koblentz

J'ai fait le tour. Lorsque timeout est défini, cela fonctionne parfaitement et envoie toutes les valeurs.

    $(document).ready(function () {
        document.getElementById('btnSendMail').onclick = function () {
            setTimeout(function () {
                document.getElementById('btnSendMail').value = 'Sending…';
                document.getElementById('btnSendMail').disabled = true;
            }, 850);
        }
    });
0
Hasan Tuna Oruç

Je pense qu’un moyen facile de désactiver le bouton est le :data => { disable_with: "Saving.." } Cela soumettra un formulaire, puis le désactivera, ce qui ne le désactivera pas si vous avez des validations comme required = 'required'.

0
chaitanya

    A better trick, so you don't lose the value of the button is

    function showwait() {
    document.getElementById('WAIT').style['display']='inline';
    document.getElementById('BUTTONS').style['display']='none';
    }

envelopper le code pour montrer dans un div

id = WAIT style = "display: none"> texte à afficher (fin div)

envelopper le code pour se cacher dans un div

id = BUTTONS style = "display: inline"> ... boutons ou quoi que ce soit à cacher avec 
onclick = "showwait ();" (fin div) 

0
Mike