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 « Êtes-vous sûr? O / 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 onclickune fonction qui retourne trueou false. Mais comment faire cela avec un <a>lien?

Gestionnaire d'événements en ligne

De la manière la plus simple, vous pouvez utiliser la confirm()fonction dans un onclickgestionnaire 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 souhaitez séparer votre code HTML et Javascript , je vous suggère donc de ne pas utiliser de gestionnaires d'événements en ligne, mais de mettre 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 fonctionne que dans les navigateurs modernes (pour IEs plus anciens , vous pouvez utiliser attachEvent(), returnValueet fournir une implémentation pour getElementsByClassName()ou utiliser une bibliothèque comme jQuery qui aidera les questions multi-navigateurs). Vous pouvez en savoir plus sur cette méthode avancée de gestion des événements sur MDN .

jQuery

Je voudrais rester loin d'être considéré comme un fanboy de jQuery, mais la manipulation DOM et la gestion des événements sont deux domaines où cela aide le plus avec les différences de navigateur. 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>

Je suggère 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 JS Fiddle .

Les éléments ci-dessus ont été mis à jour pour réduire l'espace, tout en maintenant la clarté / la 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 JS Fiddle .

Une mise à jour quelque 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 JS Fiddle .

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

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

Parce que la gestion des événements est attachée à l' bodyélément, qui contient normalement une foule 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 cliqué est un lien et a donc un tagNameof a, la gestion des clics est transmise à la reallySure()fonction.

Références:

• addEventListener().
• Opérateur conditionnel ('ternaire') .
• confirm().
• getElementsByTagName().
• onclick.
• if () {}.

<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>

Vous pouvez également essayer ceci:

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

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

Cette méthode est légèrement différente 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:

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

Ou pour les anciennes versions d'Internet Explorer:

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

Juste pour le plaisir, je vais utiliser un seul événement sur l'ensemble du document au lieu d'ajouter un événement à toutes 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 disposiez de plusieurs balises d'ancrage. Bien sûr, il devient encore plus efficace lorsque vous ajoutez cet événement au conteneur contenant toutes les balises d'ancrage.

La plupart des navigateurs n'affichent pas le message personnalisé transmis à confirm().

Avec cette méthode, vous pouvez afficher une fenêtre contextuelle avec un message personnalisé si votre utilisateur a modifié la valeur d'un <input>champ.

Vous ne pouvez l'appliquer qu'à certains liens , ou même à d'autres éléments HTML de votre page. Ajoutez simplement une classe personnalisée à tous les liens qui nécessitent une confirmation et appliquez le code suivant:

$(document).ready(function() {
  let unsaved = false;
  // detect changes in all input fields and set the 'unsaved' flag
  $(":input").change(() => unsaved = true);
  // trigger popup on click
  $('.dangerous-link').click(function() {
    if (unsaved && !window.confirm("Are you sure you want to nuke the world?")) {
      return; // user didn't confirm
    }
    // either there are no unsaved changes or the user confirmed
    window.location.href = $(this).data('destination');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" placeholder="Nuclear code here" />
<a data-destination="https://en.wikipedia.org/wiki/Boom" class="dangerous-link">
    Launch nuke!
</a>

Essayez de modifier la valeur d'entrée dans l'exemple pour obtenir un aperçu de son fonctionnement.

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é du code php 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'ai besoin .. J'espère que je peux aider quelqu'un qui a besoin de mon cas.