Les fenêtres de confirmation en JavaScript

I. Présentation

En JavaScript, il est possible de faire apparaître une fenêtre de confirmation à l'utilisateur pour qu'il confirme ou annule l'action qu'il vient de réaliser.

Par exemple, si l'utilisateur souhaite supprimer un élément, on peut lui demander si il est sûr de vouloir supprimer cet élément. Si il clic sur "OK" l'élément sera supprimé, si il clic sur "Annuler" l'action sera annulée.

Dans un autre cas, nous pouvons demander une confirmation à l'utilisateur lorsqu'on lui demande de remplir un formulaire. Cela lui permet de confirmer, d'approuver, les informations saisies. Si il clic sur "OK" le formulaire est envoyé sinon il ne l'est pas.

II. Syntaxe de la fonction confirm()

Voici la syntaxe de cette fonction :

confirm('Êtes vous sur de vouloir supprimer cet élément ?');

III. Exemple d'utilisation

Prenons le cas où l'on demande à l'utilisateur son âge et ensuite on lui demande de confirmer l'information saisie dans un formulaire avant de l'envoyer si l'utilisateur confirme, ou de retourner à la saisie du formulaire si l'utilisateur annule.

  • Code du formulaire (HTML - Page : JS-Confirm.html)
<html>
<head>
<!-- On écrira notre code JavaScript ici -->
</head>
<body>
<form action='JS-Confirm.html' name='formulaire'>
Votre age     <input type='text'   name='age'>
<input type='button' value='Confirmer'>
</form>
</body>
</html>

Habituellement, pour envoyer un formulaire on utilise un bouton de type "Submit" mais dans ce cas on ne l'utilisera pas car le bouton de type "Submit" envoie automatiquement les informations du formulaire, que vous confirmiez ou non. Il faut utiliser un bouton de type "Button" et ensuite si l'utilisateur confirme nous allons gérer nous même en JavaScript l'envoie du formulaire.

  • Exécution du JavaScript sur un clic du bouton :

La confirmation doit apparaître lorsque l'utilisateur clic sur le bouton "Confirmer", il faut donc que notre fonction JavaScript s'exécute lorsque l'on clic sur ce dernier. Pour cela il suffit d'ajouter comme option au bouton :

<input type='button' value='Confirmer' onClick='ConfirmerAge()'>

Remarque : Lorsque l'on cliquera sur le bouton cela exécutera la fonction ConfirmerAge().

  • La fonction JavaScript :
<script language='javascript'>
function ConfirmerAge()
{
if (confirm("Confirmez vous avoir "+ formulaire.age.value +" ans ?"))
{
formulaire.submit();
}
}
</script>

Ce qui signifie : Si l'utilisateur confirme son âge alors on envoie le formulaire (vous verrez alors le paramètre Age et sa valeur passer dans la barre d'adresse de votre navigateur). Si vous cliquez sur Annuler vous retournerez au formulaire.

confirm

Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Partager sur Google+ Envoyer par mail

Florian BURNEL

Ingénieur système et réseau, cofondateur d'IT-Connect et Microsoft MVP "Cloud and Datacenter Management". Je souhaite partager mon expérience et mes découvertes au travers de mes articles. Généraliste avec une attirance particulière pour les solutions Microsoft et le scripting. Bonne lecture.

Nombre de posts de cet auteur : 5471.Voir tous les posts

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.