Quick example - jQuery code to add confirmations to links

This post is more than 2 years old.

I'm not a big fan of confirmations. I mean, if I wasn't sure I wanted to do some action than I wouldn't have clicked the link, right? But sometimes clients ask us to add such confirmations to potentially dangerous operations, like deletes for example. Here is a super simple example of how to quickly add a confirmation to a range of actions on a page - delete or whatever.

To begin - lets add a class to links that we want confirmations on. For fun we will call them dangerous links.

<p> <a href="http://www.cnn.com">CNN</a><br/> <a href="http://www.aetna.com" class="dangerous">Aetnacrap</a><br/> <a href="http://www.foxnews.com" class="dangerous">Fox News</a><br/> <a href="http://www.yahoo.com">Yahoo</a> </p>

Noticed that for the four links, I've only marked two of them as dangerous. (And yes, I'm being political and angry so please forgive me. If the text bothers you, ignore it.)

Now for the code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script>

$(document).ready(function() {

$("a.dangerous").click(function() {
	return confirm("Are you sure you want to do this?")
})

}) </script>

As you can see, I simply create a selector to match all anchor tags with a class of dangerous. I bind to the click function and return true or false based on how you answer the confirmation dialog. Notice I kept the message vague. I didn't mention "delete" or any other particular action. I just gave a simple warning.

That's it. Hope this is helpful for others.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Richard Brasier posted on 10/20/2009 at 6:52 AM

Ahh a nice jQuery way, ive always done this the lazy way:

<a href="user_delete.cfm?user_id=#user_id#" onclick="javascript: return confirm('Are you sure you want to delete this user permanently from the database?');">Delete</a></td>

thx Ray :)

Comment 2 by Marco Spescha posted on 10/20/2009 at 2:56 PM

Cool.
I've done it with a simple js function and called it on the onClick-Event. So i was able to set a parameter.
For example: onClick="dangerous('delete this file')" and the function would be:
function dangerous(msg) {
confirm('Are you sure you want to ' + msg +'?');
}

something like this i think.
regards.

Comment 3 by Brian Swartzfager posted on 10/20/2009 at 4:41 PM

I just started using the Impromptu jQuery plugin (http://trentrichardson.com/... to replace the default Javascript confirmation box in my apps. It's pretty simple to implement and customize, and you end up with a nicer-looking dialog box that you can style to match the rest of the app UI.

I almost always add a confirmation step to any hyperlink that leads to a change on the database back-end, especially when such links are bunched together with other clickable items (making the chance of a misdirected click a bit higher).

Comment 4 by Scott Wimmer posted on 10/20/2009 at 6:01 PM

Isn't there anywhere left that one can go without the constant drumbeat of politics? Is everyone now a pundit? It is becoming very annoying and predictable. With all due respect, please try to resist.

Comment 5 by Raymond Camden posted on 10/20/2009 at 6:06 PM

With all due respect, this is my blog. I like to have fun with my samples. Many times I'll mention Paris Hilton, who certainly has no relation to ColdFusion. I do it to liven up the code a bit.

Comment 6 by Robert posted on 10/20/2009 at 6:28 PM

It's these types of functions that make jQuery such a valuable efficiency tool. Thanks for sharing! And, I don't mind the politics. It's your blog and you can do with it as you see fit. It doesn't hurt that you agree with my personal views :-)

Comment 7 by Raymond Camden posted on 10/20/2009 at 8:42 PM

@BrianS: Wow, impromptu is nice. Looks a bit slicker than jQuery Dialog.

Comment 8 by Brian Lang posted on 10/20/2009 at 8:58 PM

If you're using relative or absolute paths for your internal links (instead of fully qualified urls) you can target external links with this JQuery Selector:
$('a[href^="http"]')

You would then modify Ray's click function as follows to put out an alert for all external links:
$('a[href^="http"]').click(function() {
return confirm("Are you sure you want to do this?")
}

This way you do NOT have to add unnecessary, non-semantic code.

Comment 9 by Bill Downs posted on 10/20/2009 at 9:47 PM

Wow - incredibly simple. Thanks Ray. I was just coding a form for internal use when your article showed up.

I simply changed the CSS tag 'dangerous' to something more 'me' friendly. Everyones happy.

Comment 10 by Brian Swartzfager posted on 10/20/2009 at 9:55 PM

@Ray: Yeah, sometimes I find using the jQuery UI widgets to be a bit more trouble than they're worth (though I do use the Datepicker).

@Bill Did you change "dangerous" to "mostlyHarmless"? :)

Comment 11 by Bill Downs posted on 10/20/2009 at 11:24 PM

Sorry Brian, I'm not going to take the bait on a Coldfusion blog. This is Ray's place - he get's to pick out the curtains.

Comment 12 by Brian Swartzfager posted on 10/20/2009 at 11:37 PM

@Bill: Eh? I was just making a lame Hitchhiker's joke. It wasn't meant as a comment on what Ray choose to classify as "dangerous" in his code example.

Comment 13 by Bill Downs posted on 10/21/2009 at 12:34 AM

Sorry, didn't run your comment through my obscurity filter. :) Never was much of a hitchhiker fan. Nuff said. Hey, how bout dem Phillies ???!