Achetez et vendez votre matériel multimédia d'occasion sur notre service de petites annonces informatiques gratuites

Griser un bouton après envoi de formulaire

Tutoriaux > Javascript > Griser un bouton après envoi de formulaire

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

Ajouter un commentaire

Suite a un fort volume de spam, les commentaires d'invités sont pour le moment désactivés. Vous devez vous inscrire ou vous identifier pour pouvoir commenter cet article, ou demander du support.

Lectures recommandées

Commentaires sur cet article

marie - Le 06 Décembre 2011 à 16h52

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

Tutoriaux > Javascript > Griser un bouton après envoi de formulaire