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.1 <p>
2 <a href="http://www.cnn.com">CNN</a><br/>
3 <a href="http://www.aetna.com" class="dangerous">Aetnacrap</a><br/>
4 <a href="http://www.foxnews.com" class="dangerous">Fox News</a><br/>
5 <a href="http://www.yahoo.com">Yahoo</a>
6 </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:
2 <a href="http://www.cnn.com">CNN</a><br/>
3 <a href="http://www.aetna.com" class="dangerous">Aetnacrap</a><br/>
4 <a href="http://www.foxnews.com" class="dangerous">Fox News</a><br/>
5 <a href="http://www.yahoo.com">Yahoo</a>
6 </p>
1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
2 <script>
3
4 $(document).ready(function() {
5
6 $("a.dangerous").click(function() {
7 return confirm("Are you sure you want to do this?")
8 })
9
10 })
11 </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.
2 <script>
3
4 $(document).ready(function() {
5
6 $("a.dangerous").click(function() {
7 return confirm("Are you sure you want to do this?")
8 })
9
10 })
11 </script>
Comment 1 written by Richard Brasier on 19 October 2009, at 9:52 PM
<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 written by Marco Spescha on 20 October 2009, at 5:56 AM
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 written by Brian Swartzfager on 20 October 2009, at 7:41 AM
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 written by Scott Wimmer on 20 October 2009, at 9:01 AM
Comment 5 written by Raymond Camden on 20 October 2009, at 9:06 AM
Comment 6 written by Robert on 20 October 2009, at 9:28 AM
Comment 7 written by Raymond Camden on 20 October 2009, at 11:42 AM
Comment 8 written by Brian Lang on 20 October 2009, at 11:58 AM
$('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 written by Bill Downs on 20 October 2009, at 12:47 PM
I simply changed the CSS tag 'dangerous' to something more 'me' friendly. Everyones happy.
Comment 10 written by Brian Swartzfager on 20 October 2009, at 12:55 PM
@Bill Did you change "dangerous" to "mostlyHarmless"? :)
Comment 11 written by Bill Downs on 20 October 2009, at 2:24 PM
Comment 12 written by Brian Swartzfager on 20 October 2009, at 2:37 PM
Comment 13 written by Bill Downs on 20 October 2009, at 3:34 PM
[Add Comment] [Subscribe to Comments]