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

Question

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 quand il passe à la page suivante, les paramètres ne sont pas passés et les valeurs nulles sont passées.

Answer 1

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

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

Answer 2

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

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

Answer 3

Vous devez désactiver le bouton dans l'événement onsubmit <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: cette façon si vous avez un élément de formulaire qui a l' required fonctionnera.

Answer 4

Les éléments de formulaires HTML désactivés ne sont pas envoyés avec les valeurs post / get lorsque vous soumettez le formulaire. Donc, si vous désactivez votre bouton d'envoi une fois que vous avez cliqué et que ce bouton d' name défini, il ne sera pas envoyé dans les valeurs post / get puisque l'élément est maintenant désactivé. C'est un comportement normal.

L'un des moyens de surmonter ce problème consiste à utiliser des éléments de formulaire masqués.