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

Ajouter facilement un double-curseur à vos formulaires HTML

Lors de la conception de formulaires HTML on se retrouve assez vite limité par les éléments proposés de base. C'est par exemple le cas si on utilise les curseurs avec le code <input type="range">, ceux-ci ne permettent l'utilisation que d'un seul curseur par...

Récupérer les paramètres GET d'une URL avec React.JS

Quoi de plus basique que de récupérer les données fournies en GET dans l'URL d'un site internet, enfin en théorie seulement parce qu'avec React.JS c'est un poil plus compliqué. Heureusement voici une solution qui va vous permettre de...

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...