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.

Categories : Javascript, JQuery

By Guillaume - 09/18/2016 at 11:22 am

Shar this article :

Similar articles

Easily add a dual-slider to your HTML forms

When designing HTML forms, you may quickly find yourself limited by the basic form elements provided. For example, if you use sliders with the <input type="range"> element, they only allow the use of a single slider per element. However, there may be times when you need a field with two...

Avoiding slowdowns of a JavaScript counter on an inactive tab

If you're trying to create a Javascript counter that increments every second, you may notice that it works correctly when you're on the active tab but experiences slowness when the tab is not active. This can lead to a desynchronization between the counted seconds and real-time. Here's a simple...