Forum Moderators: open
you are going to [mysite.com...]
thanks
You want to use the onClick event to trigger the event. If you want it to let the alert "hang" there while the page loads, no other code is required - see #1. If you want the user to DECIDE if they want to proceed, you will have to use the confirm box instead of alert, and pass the destination url to a function in which you take an action based on their choice. Normally, clicking the link will cause the page will move to it's destination anyway regardless of what the javascript does, so you need to disable this ordinary action using 'return false' in the link or the routine. This approach also allows it to work if Javascript is disabled.
#1 Alert only
<a href="somepage.html" onClick="alert('You are going to somepage.html');">some page</a>
#2 Be Cool and Allow User to Decide
<a href="somepage.html" onClick="tell_them('somepage.html'); return false;">some page</a>
<script type="text/javascript">
function tell_them(page) {
//'some_page.html' is stored in the variable 'page'
var yes_or_no = confirm('You are going to ' + page + '. Continue?');
if (yes_or_no == true) { document.location=page; }
}
</script>
Untested, but that should work. :-)
This is not necessarily the best solution - but it will work. :-)
Make sure to include the JavaScript in the <head> of your document. You might want to move it into a separate file.
Make sure to include "linkSetup()" in your body onload. Or, you could probably just include it at the bottom of your page...
This script will allow you to have the desired functionality without having to modify any of your links. You can selectively disable the behavior for links by adding the class "noAlert" (or whatever you change it to). You could easily modify the script to instead only use the behavior if a class name is included in the link (for example: "showAlert").
Let me know if you have any questions. I hope this helps!
Try copying the following code into a new HTML document so you can play with it:
<html>
<head>
<title>Link Test</title><script language="javascript" type="text/javascript">
<!--var linkAlertString = "You are about to go to the following URL:\n";
var noAlertClassName = "noAlert";function linkAlert(url) {
// uncomment the following line to use simple alert
// alert(url); return true;
// use confirmation
if (confirm(linkAlertString + url)) {
return true;
}
// if not confirmed then don't go
return false;
}function linkSetup() {
var links = document.getElementsByTagName('A');
for (var i = 0; i < links.length; i++) {
if (links[i].className.indexOf(noAlertClassName)!= -1) continue;
links[i].onclick = function() {
return linkAlert(this.href);
}
}
}
//-->
</script></head>
<body onload="linkSetup();">
<p>
This link will just go because I included the classname "noAlert" <br />
You can change the className to use in the variable noAlertClassName. <br />
This will work even if you want to use another class. (i.e. class="anotherClass noAlert customStyle7).
<br />
<a href="http://www.google.com" class="noAlert">Google</a>
</p><p>
The others will execute the script. <br />
<a href="http://www.yahoo.com">Yahoo</a> <br />
<a href="http://www.reddit.com">Reddit</a> <br />
</p></body>
</html>
