Confirming a Link Click with jQuery

Here’s a function I wrote while working on a project that pops up a box confirming whether or not the user is sure the want to go to a link they clicked, like this.

It may be simple, but I haven’t really used javascript’s confirm() function much in the past and everything I found only directed the user to a link predefined in the function. I wanted a function that would confirm any link I wanted it to without knowing the link destination in advance, in other words I wanted to confirm dynamic links.

The Code

This jQuery function will pop up a confirmation box on any link with the class ‘confirm’ and send the user to the destination of that link if they click ‘OK’.

$(document).ready(function() {
  $('a.confirm').click(function(event) {
    event.preventDefault()
    var url = $(this).attr('href');
    var confirm_box = confirm('Are you sure you want to click this link?');
    if (confirm_box) {
       window.location = url;
       //uncomment below and remove above if you want the link to open in a new window
       //window.open(url,'_blank');
    }
  });
});

Code Explained

//load once document is ready
$(document).ready(function() {

  //select all anchors with a class of 'confirm'
  $('a.confirm').click(function(event) {

    //prevent the default action of opening the link
    event.preventDefault()

    //grab the url of the current link
    var url = $(this).attr('href');

    //set the confirmation message
    var confirm_box = confirm('Are you sure you want to click this link?');

    //if the confirmation is true (user clicks ok) direct the browser to the link's url
    if (confirm_box) {
       window.location = url;
       //uncomment below and remove above if you want the link to open in a new window
       //window.open(url,'_blank');
    }
  });
});

Example

Because the link below has a class of ‘confirm’ you’ll have to confirm whether or not you want to go to the link’s destination.

Link Code

<a href="http://www.grimmdude.com/contact/" class="confirm">Link Example</a>

The Link

Link Example