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.
