Maxy.fr

Demander une confirmation en Jquery lors du clique sur un lien

Parce qu'il est parfois utile de demander une confirmation lorsque l'on clique sur un lien avant d'être redirigé - lorsque ce lien permet la suppression de quelque chose par exemple - et qu'il est assez lourd de devoir le faire en PHP, voici un petit code Jquery permettant de le faire simplement.

Ce code permet simplement d'afficher une fenêtre demandant si l'on souhaite continuer ou non l'action. Si l'on clique sur "Oui" on est redirigé, sinon non.

<a href="http://votrelien.com/" class="lienAConfirmer">Cliquez ici</a>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$('.lienAConfirmer').click(function(e){
	//Annule l'action par défaut qui est la redirection
    e.preventDefault();

    //Demande une confirmation
    if(window.confirm('Êtes-vous sûr de vouloir supprimer cet article ?')){

    	//Si la confirmation est donnée, on redirige
        var url = $(this).attr('href');

        window.location.href = url;

    };

});
</script>

Pour que ce code fonctionne, il vous suffit d'ajouter une classe avec le nom que vous souhaitez (ici ".lienAConfirmer") sur vos liens ainsi que dans le code jquery permettant de détecter le clique.

Le code permet simplement d'annuler l'action effectuée par défaut par un lien html classique, donc la redirection. Il permet de demander une confirmation avec le texte de son choix (ici "Êtes-vous sûr de vouloir supprimer cet article ?" par exemple) et si l'utilisateur clique sur "Oui" il est redirigé vers le lien présent dans la balise a html. Sinon il ne se passe rien.

Tout simplement.

C'est une version volontairement minimaliste, à vous ensuite de passer par Ajax si vous souhaitez que la page soit exécutée dynamiquement ...

Petite précision, si l'utilisateur désactive javascript sur son navigateur alors il sera redirigé comme si il s'agissait d'un lien normal, sans confirmation.

Catégories : Javascript, JQuery

Par Guillaume le 18/09/2016 à 11:22

Partager l'article :

Articles similaires

Eviter les ralentissements d'un compteur Javascript sur un onglet non actif

Si vous essayez de faire un compteur qui s'incrémente toutes les secondes en Javascript, vous remarquerez que tout fonctionne correctement lorsque vous êtes sur l'onglet en question, mais que celui-ci subira des ralentissements lorsque l'onglet n'est pas actif. Vous avez donc une...

Comment récupérer la valeur d'un formulaire select en jquery

Si vous avez un formulaire de type select en HTML et que vous souhaitez récupérer la valeur ou le texte du champ sélectionné, voici comment procéder. Prenons exemple du formulaire suivant : <select id="couleur"> <option...

Exécuter une fonction à retardement en javascript

Il est parfois utile d'exécuter une fonction avec quelques secondes voir quelques minutes de retard. Sachez que c'est très simple à réaliser grâce à la méthode setTimeout(fonction, temps). Cette méthode vous demandera deux arguments : la...