web-dev-qa-db-fra.com

Comment afficher une boîte de dialogue de confirmation lorsque vous cliquez sur un lien <a>?

Je veux que ce lien ait une boîte de dialogue JavaScript qui demande à l'utilisateur “ Etes-vous sûr? Y/N ”.

<a href="delete.php?id=22">Link</a>

Si l'utilisateur clique sur “Oui”, le lien devrait se charger. Si “Non”, rien ne se passera.

Je sais comment faire cela dans les formulaires, en utilisant onclick en exécutant une fonction qui retourne true ou false. Mais comment puis-je faire cela avec un lien <a>?

javascripthtmljavascript-events
212
Christoffer

Gestionnaire d'événements en ligne

De la manière la plus simple, vous pouvez utiliser la fonction confirm() dans un gestionnaire onclick en ligne.

<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>

Gestion avancée des événements

Mais normalement, vous voudriez séparer votre code HTML et votre code JavaScript . Je vous suggère donc de ne pas utiliser les gestionnaires d’événements en ligne, mais de placer une classe sur votre lien et d’y ajouter un écouteur d’événements.

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<script type="text/javascript">
    var elems = document.getElementsByClassName('confirmation');
    var confirmIt = function (e) {
        if (!confirm('Are you sure?')) e.preventDefault();
    };
    for (var i = 0, l = elems.length; i < l; i++) {
        elems[i].addEventListener('click', confirmIt, false);
    }
</script>

Cet exemple ne fonctionnera que sur les navigateurs modernes (pour les anciens IE, vous pouvez utiliser attachEvent(), returnValue et fournir une implémentation pour getElementsByClassName() ou utiliser une bibliothèque telle que jQuery qui vous aidera à résoudre les problèmes entre navigateurs). Vous pouvez en savoir plus sur cette méthode de gestion d'événements avancée sur MDN .

jQuery

J'aimerais rester loin d'être considéré comme un fanboy de jQuery, mais la manipulation du DOM et la gestion des événements sont deux domaines dans lesquels cela aide le plus à différencier les navigateurs. Juste pour le plaisir, voici à quoi cela ressemblerait avec jQuery :

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<!-- Include jQuery - see http://jquery.com -->
<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('Are you sure?');
    });
</script>
489
kapa
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
13
coder

Je suggérerais d'éviter le JavaScript en ligne:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        var check = confirm("Are you sure you want to leave?");
        if (check == true) {
            return true;
        }
        else {
            return false;
        }
    };
}​

Démo de JS Fiddle .

Le ci-dessus mis à jour pour réduire l'espace, tout en maintenant la clarté/fonction:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        return confirm("Are you sure you want to leave?");
    };
}

Démo de JS Fiddle .

Une mise à jour un peu tardive, à utiliser addEventListener() (comme suggéré par bažmegakapa , dans les commentaires ci-dessous):

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}
var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].addEventListener('click', reallySure);
}

Démo de JS Fiddle .

Ce qui précède lie une fonction à l'événement de chaque lien individuel; ce qui est potentiellement très inutile, lorsque vous pouvez lier la gestion des événements (à l'aide de la délégation) à un élément ancêtre, tel que:

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}

function actionToFunction (event) {
    switch (event.target.tagName.toLowerCase()) {
        case 'a' :
            reallySure(event);
            break;
        default:
            break;
    }
}

document.body.addEventListener('click', actionToFunction);

Démo de JS Fiddle .

Étant donné que la gestion des événements est liée à l'élément body, qui contient normalement un hôte d'autres éléments cliquables, j'ai utilisé une fonction intérimaire (actionToFunction) pour déterminer quoi faire avec ce clic. Si l'élément sur lequel vous avez cliqué est un lien et qu'il a donc une tagName de a, le traitement des clics est transmis à la fonction reallySure().

Références:

13
David Thomas

Vous pouvez aussi essayer ceci:

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>
2
Wolfack

jAplus

Vous pouvez le faire, sans écrire de code JavaScript

<head>
   <script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
...
   <a href="delete.php?id=22" class="confirm" title="Are you sure?">Link</a>
...
</body>

Page de démonstration

0
erik

UTILISATION DE PHP, HTML ET JAVASCRIPT pour l'invite

Juste si quelqu'un cherche à utiliser php, html et javascript dans un seul fichier, la réponse ci-dessous fonctionne pour moi.

<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>

la raison pour laquelle j'ai utilisé php code au milieu est parce que je ne peux pas l'utiliser depuis le début .. 

le code ci-dessous ne fonctionne pas pour moi: -

echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";

et je l'ai modifié comme dans le 1er code puis je lance comme ce dont j'avais besoin. J'espère que je peux aider quelqu'un qui a besoin de mon cas.

0
Shah Abd Hafiz

Cette méthode diffère légèrement de l'une des réponses ci-dessus si vous attachez votre gestionnaire d'événements à l'aide de addEventListener (ou attachEvent).

function myClickHandler(evt) {
  var allowLink = confirm('Continue with link?');
  if (!allowLink) {
    evt.returnValue = false; //for older Internet Explorer
    if (evt.preventDefault) {
      evt.preventDefault();
    }
    return false;
  }
}

Vous pouvez attacher ce gestionnaire avec soit:

document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);

Ou pour les anciennes versions d'Internet Explorer:

document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);
0
Chad Killingsworth

Juste pour le plaisir, je vais utiliser un seul événement sur l'ensemble du document au lieu d'ajouter un événement à all les balises d'ancrage:

document.body.onclick = function( e ) {
    // Cross-browser handling
    var evt = e || window.event,
        target = evt.target || evt.srcElement;

    // If the element clicked is an anchor
    if ( target.nodeName === 'A' ) {

        // Add the confirm box
        return confirm( 'Are you sure?' );
    }
};

Cette méthode serait plus efficace si vous aviez plusieurs balises d'ancrage. Bien entendu, cela devient encore plus efficace lorsque vous ajoutez cet événement au conteneur contenant toutes les balises d'ancrage.

0
Florian Margaine