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

Co-Fondateur d’IT-Connect, je souhaite partager mes connaissances et expériences avec vous, et comme la veille techno’ est importante je partage aussi des actus.

florian a publié 1614 articles sur IT-Connect.See all posts by florian

Laisser un commentaire

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