Javascript Confirm Box
August 7th, 2009 in Javascript. No Comments Yet
A lot of developers have found that users can sometimes click links without thinking, this is not normally too harmful unless the button does something like delete a record from a database. That is why a lot of sites use confirmation boxes that will ask a user “Do you really want to delete this?” before the action is completed.
This tutorial will show you how to create a javascript function that will allow you to do this really easily.
Here’s an example of what we will be creating:
First of all we will need our link that will delete the record, I’ll just use a dummy page with the link on like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Javascript Confirm Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<a href="delete.html">Delete</a>
</body>
</html>
The “Delete” link is going to be the link we’ll add the confirmation to.
Next we need our javascript function:
function confirmDelete(delUrl) {
if (confirm("Are you sure?")) {
document.location = delUrl;
}
}
The javascript is pretty simple. When the user clicks the link, a confirm box is popped up. The text from the confirm box is the “Are you sure?” text. If the user clicks “Ok” then they are redirected to the delUrl link, otherwise they stay on the page they are on.
Now we need to make a few changes to the HTML. We need to add the javascript function and we need to tell the link to run the function when it is clicked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Javascript Confirm Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
function confirmDelete(delUrl) {
if (confirm("Are you sure?")) {
document.location = delUrl;
}
}
</script>
</head>
<body>
<a href="javascript:confirmDelete('delete.html')">Delete</a>
</body>
</html>
Now you can see in the example, when the link is clicked a box pops up and asks you if you are sure, if you click Ok you go to the delete.html page, if you click Cancel you go back to the page you were on. Simple!
Now, lets make this function a little bit more generic. Say we had one link on our site to delete the item, like in the example above. But we also had a link to let a user hide an item aswell. Using the code above, we would need one function to say “Are you sure you want to delete this item?” and one to say “Are you sure you want to hide this item?” which we really don’t want to do if we can get away with it.
So if you need to, you can use this slightly modified function.
<script type="text/javascript">
function confirmDelete(delUrl,msg) {
if (confirm(msg)) {
document.location = delUrl;
}
}
</script>
Basically, all we’ve done here is, rather than hard coding the text that is displayed in the confirm box, we’ve set it as a variable called msg which is passed from the link.
The code for our page now looks like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Javascript Confirm Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
function confirmDelete(delUrl,msg) {
if (confirm(msg)) {
document.location = delUrl;
}
}
</script>
</head>
<body>
<a href="javascript:confirmDelete('delete.html','Delete this?')">Delete</a> | <a href="javascript:confirmDelete('hide.html','Hide this?')">Hide</a>
</body>
</html>
You might have noticed I’ve changed the links slightly to include the text to go in the confirm box.
And that’s it, you now have a delete confirmation function that can link to any page and display any message.
No Responses