Wie wird ein Bestätigungsdialog angezeigt, wenn Sie auf einen <a> -Link klicken?

Ich möchte, dass dieser Link ein JavaScript-Dialogfeld enthält, in dem der Benutzer gefragt wird: „ Sind Sie sicher? J / N ”.

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

Wenn der Benutzer auf "Ja" klickt, sollte der Link geladen werden, wenn "Nein", passiert nichts.

Ich weiß, wie man das in Formularen macht, indem onclickman eine Funktion ausführt, die trueoder zurückgibt false. Aber wie mache ich das mit einem <a>Link?

Inline-Event-Handler

Auf einfachste Weise können Sie die confirm()Funktion in einem Inline- onclickHandler verwenden.

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

Erweiterte Ereignisbehandlung

Normalerweise möchten Sie jedoch HTML und Javascript trennen. Ich empfehle daher, keine Inline-Ereignishandler zu verwenden, sondern eine Klasse in Ihren Link einzufügen und einen Ereignis-Listener hinzuzufügen.

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

Dieses Beispiel wird in modernen Browsern nur Arbeit (für ältere IEs können Sie verwenden attachEvent(), returnValueund für eine Implementierung zur Verfügung stellen getElementsByClassName()oder eine Bibliothek wie jQuery verwenden , die mit Cross-Browser - Problemen helfen). Weitere Informationen zu dieser erweiterten Ereignisbehandlungsmethode finden Sie in MDN .

jQuery

Ich würde gerne weit davon entfernt sein, als jQuery-Fanboy betrachtet zu werden, aber DOM-Manipulation und Ereignisbehandlung sind zwei Bereiche, in denen es bei Browserunterschieden am meisten hilft. Nur zum Spaß, so würde das mit jQuery aussehen :

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

Ich würde vorschlagen, Inline-JavaScript zu vermeiden:

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;
        }
    };
}​

JS Fiddle Demo .

Das oben Gesagte wurde aktualisiert, um Platz zu sparen, obwohl Klarheit / Funktion erhalten bleiben:

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?");
    };
}

JS Fiddle Demo .

Ein etwas verspätetes Update, das verwendet werden kann addEventListener()(wie von bažmegakapa in den Kommentaren unten vorgeschlagen):

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);
}

JS Fiddle Demo .

Das Obige bindet eine Funktion an das Ereignis jeder einzelnen Verbindung; Dies ist möglicherweise ziemlich verschwenderisch, wenn Sie die Ereignisbehandlung (mithilfe der Delegierung) an ein Vorgängerelement wie das folgende binden können:

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);

JS Fiddle Demo .

Da die Ereignisbehandlung an das bodyElement angehängt ist, das normalerweise eine Vielzahl anderer anklickbarer Elemente enthält, habe ich eine Zwischenfunktion ( actionToFunction) verwendet, um zu bestimmen, was mit diesem Klick geschehen soll. Wenn das angeklickte Element ein Link ist und daher ein tagNamevon hat a, wird die Klickbehandlung an die reallySure()Funktion übergeben.

Verweise:

• addEventListener().
• Bedingter ('ternärer') Operator .
• confirm().
• getElementsByTagName().
• onclick.
• if () {}.

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

Sie können dies auch versuchen:

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

jAplus

Sie können dies tun, ohne JavaScript-Code zu schreiben

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

Demoseite

Diese Methode unterscheidet sich geringfügig von den oben genannten Antworten, wenn Sie Ihren Ereignishandler mit addEventListener (oder attachEvent) anhängen.

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;
  }
}

Sie können diesen Handler mit folgenden Optionen anhängen:

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

Oder für ältere Versionen des Internet Explorers:

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

Nur zum Spaß werde ich ein einzelnes Ereignis für das gesamte Dokument verwenden, anstatt allen Ankertags ein Ereignis hinzuzufügen :

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?' );
    }
};

Diese Methode wäre effizienter, wenn Sie viele Ankertags hätten. Natürlich wird es noch effizienter, wenn Sie dieses Ereignis dem Container mit allen Ankertags hinzufügen.

Die meisten Browser zeigen die an übergebene benutzerdefinierte Nachricht nicht an confirm().

Mit dieser Methode können Sie ein Popup mit einer benutzerdefinierten Nachricht anzeigen, wenn Ihr Benutzer den Wert eines <input>Felds geändert hat .

Sie können dies nur auf einige Links oder sogar andere HTML-Elemente auf Ihrer Seite anwenden . Fügen Sie einfach eine benutzerdefinierte Klasse zu allen Links hinzu, die bestätigt werden müssen, und wenden Sie den folgenden Code an:

$(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>

Versuchen Sie, den Eingabewert im Beispiel zu ändern, um eine Vorschau der Funktionsweise zu erhalten.

VERWENDUNG VON PHP, HTML UND JAVASCRIPT zur Eingabeaufforderung

Nur wenn jemand nach PHP, HTML und Javascript in einer einzigen Datei sucht , funktioniert die Antwort unten für mich. Ich habe mit dem verwendeten Bootstrap-Symbol "Papierkorb" für den Link angehängt.

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

Der Grund, warum ich PHP- Code in der Mitte verwendet habe, ist, dass ich ihn nicht von Anfang an verwenden kann.

Der folgende Code funktioniert bei mir nicht: -

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>";

und ich habe es wie im 1. Code geändert, dann laufe ich genau so, wie ich es brauche. Ich hoffe, dass ich jemandem helfen kann, der meinen Fall nicht braucht.