How to Display a Confirmation Dialog When Clicking an ≪A≫ Link

How to display a confirmation dialog when clicking an <a> link?

Inline event handler

In the most simple way, you can use the confirm() function in an inline onclick handler.

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

Advanced event handling

But normally you would like to separate your HTML and Javascript, so I suggest you don't use inline event handlers, but put a class on your link and add an event listener to it.

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

This example will only work in modern browsers (for older IEs you can use attachEvent(), returnValue and provide an implementation for getElementsByClassName() or use a library like jQuery that will help with cross-browser issues). You can read more about this advanced event handling method on MDN.

jQuery

I'd like to stay far away from being considered a jQuery fanboy, but DOM manipulation and event handling are two areas where it helps the most with browser differences. Just for fun, here is how this would look with 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>

How to confirm navigation for a link in a href tag?

Try...

<a title="Delete User" onclick="return confirm_click();" href="http://www.google.com"><i class="icon-remove-sign">DELETE</i></a>

...instead.

You need to return the value of your method, and returning false in an onclick event prevents the default behaviour (which in this case would be to navigate to the href).

I want to display a message in confirm dialog in javascript without using html or any other

Try this method in onClick listener,

    <script>
        function clickAction()
{
        var result;
        var buttonpressed=confirm("Button Press");
        if (buttonpressed==true)
{
          result="OK";
          }
        else
{
          result="Cancel";
          }
        document.getElementById("demo").innerHTML=result;
        }
    </script>

jQuery dialog confirm before opening link

$("a").on("click", function(e) {
    var link = this;

    e.preventDefault();

    $("<div>Are you sure you want to continue?</div>").dialog({
        buttons: {
            "Ok": function() {
                window.location = link.href;
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
});

Example: http://jsfiddle.net/uRGJD/

(Redirecting to Google won't work on JSFiddle but should work on a normal page)

confirmation dialog isn't showing

You should avoid using the name of HTML and Window objects and properties:

https://www.w3schools.com/js/js_reserved.asp

don't use confirm use ConfirmDialog or something!

---

Related Topics