Griser un bouton après envoi de formulaire

Un bouton de formulaire qui se grise après l'envoi pour éviter que l'utilisateur clique une deuxième fois dessus en pensant que le formulaire n'a pas été validé.

Pour éviter qu'un formulaire soit envoyé deux fois de suite, il peut être nécessaire de griser le bouton d'envoi après avoir cliqué dessus.

Prenons un formulaire tout bête :

<form action="mail.php" method="pos" enctype="text/plain">



<input type="text" name="mail" value="e-mail"

onfocus='if (this.value=="e-mail") this.value=""' size="17" /><br /><br />



<input type="submit" value="Envoyer" />

</form>

Ce formulaire permet de faire un mailto: , c'est à dire d'ouvrir le logiciel de messagerie de l'ordinateur concerné et que le texte tapé dans le formulaire soit déjà dans le message à envoyer.

Pour griser le bouton d'envoi, il vous suffit de rajouter :

onclick="this.form.submit();this.disabled=true;this.value='En cours'"

Qui se chargera de "Disabled", à savoir désactiver le bouton lorsque qu'il est pressé, dans la balise <form>.

Ce qui donnera pour cet exemple :

<form action="mail.php" method="post" enctype="text/plain">



<input type="text" name="mail" value="e-mail"

onfocus='if (this.value=="e-mail") this.value=""' size="17" /><br /><br />



<input type="submit" value="Envoyer" onclick="this.form.submit();this.disabled=true;this.value='En cours'" />

</form>

Ce petit code rajouté sur le input aura pour effet de griser le bouton cliqué et d'écrire "En cours" à la place du "Envoyer" d'origine.

Par Pouzy , Le 05 Avril 2010 à 17h57
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à Javascript

Commentaires sur cet article

<?php header("Location: la page actuel.php"); ?>
rafraichi la meme page est empeche la double soumission ^^.