Hi,
I am designing an guestbook in ajax.
The data comes from an xml file.
When the user enter a valid person, the information related to that person is displayed on the page (picture, name, surname, email adress).
The email adress displayed on the page needs to be in the mailto form.
I can’t figure out how to make the mailto request properly.
Here is the line that cause me problems.
<a id=“email” href=“javascript:mailto:”+document.getElementById(‘email’).value></a>
Any Hint?
Well, there are two problems here.
First is that your code is looking for the value of the element with the ID ‘email’ - but the link element has that ID. I’m assuming that there’s another element with that ID, and that causes big problems. Each element must have a unique ID.
Secondly, your syntax is wrong. Javascript doesn’t understand the mailto command or syntax - but you can make it act as a link. For example:
<a href="javascript: window.location = 'mailto:' + document.getElementById('email').value;">Email</a>
<span onclick="window.location = 'mailto:' + document.getElementById('email').value;">Email</span>
<button onclick="window.location = 'mailto:' + document.getElementById('email').value">Email</button>
And what happens if your users don’t have JS enabled? You should look into progressive enhancement, and while you’re at it I suggest reading up on unobtrusive JavaScript. Inline JS (especially with the “javascript:” psuedo-protocol) is looked upon as a very bad practice, and rightly so.
Thanks Jake, i tried the code above and it does’t work.
Here is all my code, it’s pretty long…I remove my google maps personnal key for secutiy reasons…And to test my program you would also need my css and xml file. So here’s my javascript code…
Cheers
<html>
<head>
<link rel="StyleSheet" type="text/css" href="lesson12.css">
<script src="http://maps.google.com/maps?file=api&v=XXX"
type="text/javascript"></script>
<script type="text/javascript">
var recent1 = initCookie("recent1")
var recent2 = initCookie("recent2")
function initCookie(cookieName){
if (document.cookie.indexOf(cookieName + "=") == -1){
return ""
}
else {
getCookie(cookieName)
}
}
function setRecent(mostRecentName){
recent2=recent1
recent1=mostRecentName
document.cookie="recent1="+recent1
if (recent2.length >= 1){
document.cookie="recent2="+recent2
}
}
function getRecent(){
if(recent2){
document.getElementById("R1").innerHTML=getCookie("recent1")
document.getElementById("R2").innerHTML=getCookie("recent2")
}
else{
document.getElementById("R1").innerHTML=getCookie("recent1")
}
}
function getCookie(c_name){
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1 ;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end));
} //end if #1
} //end if #2
return ""
} //end getcookie
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : "; expires="+exdate.toGMTString());
} //end setCookie
function checkCookie()
{
username=getCookie('username');
if (username!=null && username!="")
{
//document.write('Welcome back'+username+'!');
document.getElementById("welcome").innerHTML= "Welcome "+username+"!";
} // end if
else
{
username=prompt('Please enter your name:',"");
if (username!=null && username!="")
{
setCookie('username',username,365);
} // end if
window.location.reload();
} // end else
} // end checkCookie
function resetCookie()
{
username=prompt('Please enter your name:',"");
if (username!=null && username!="")
{
setCookie('username',username,365);
} // end if
window.location.reload();
} //end resetCookie
var map = null;
var geocoder = null;
function showAddress(name, address, phone) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + "is not a recognized address");
}
else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml(name +"<br />"+address+"<br />"+phone);
});
} // end else
} // end function(point)
); // end geocoder.getLatLng
} // end if
} // end showAddress
function showAddress2(name, address, phone) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
}
else {
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml(name +"<br />"+address+"<br />"+phone);;
});
} // end else
} // end function(point)
); // end geocoder.getLatLng
} // end if
} // end showAddress 2
function createRequestObject() {
var ro
var browser = navigator.appName
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP")
}else{
ro = new XMLHttpRequest()
}
return ro
}
var http = createRequestObject()
function sndReq() {
load() //Runs the load() function
http.open('get','lesson12.xml', true)
http.onreadystatechange = handleResponse
http.send(null)
}
function load() {
getRecent()
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.removeMapType(G_HYBRID_MAP);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
}
function handleResponse() {
var found = 0
if (http.readyState == 4){ //if #1
Name.innerHTML = ""
address.innerHTML = ""
phone.innerHTML = ""
email.innerHTML = ""
var response = http.responseXML.documentElement
listings=response.getElementsByTagName("LISTING")
var Error = "Enter a valid Name";
var Error2 = "Enter at least one caracter"
var Entered = (document.getElementById("name").value);
var upperCase = Entered.toUpperCase();
if (Entered.length < 1) {
document.getElementById("Name").innerHTML = Error2; }
else { // else #1
if (document.getElementById("Name").innerHTML == "") { // if
document.getElementById("Name").innerHTML = Error;
document.getElementById("photo").src = "images/phonebook.jpg";
// photo.src = images/phonebook.jpg;
}
for (i=0;i<listings.length;i++) { // for #1
firstnameobj = listings[i].getElementsByTagName("FIRST")
lastnameobj = listings[i].getElementsByTagName("LAST")
firstName = firstnameobj[0].firstChild.data.toUpperCase();
var firstString = firstName.substr(0, Entered.length);
pattern = new RegExp(upperCase);
if ((firstnameobj[0].firstChild.data.toUpperCase() == document.getElementById("name").value.toUpperCase())||(lastnameobj[0].firstChild.data.toUpperCase() == document.getElementById("name").value.toUpperCase())){ //if #2
firstobj = listings[i].getElementsByTagName("FIRST")
lastobj = listings[i].getElementsByTagName("LAST")
addressobj = listings[i].getElementsByTagName("ADDRESS")
phoneobj = listings[i].getElementsByTagName("PHONE")
emailobj = listings[i].getElementsByTagName("EMAIL")
photobj = listings[i].getElementsByTagName("IMAGE")
Name.innerHTML = firstobj[0].firstChild.data + " " + lastobj[0].firstChild.data
address.innerHTML = addressobj[0].firstChild.data
phone.innerHTML = phoneobj[0].firstChild.data
email.innerHTML = emailobj[0].firstChild.data
photo.src = photobj[0].firstChild.data
theName = firstobj[0].firstChild.data+" "+lastobj[0].firstChild.data
theAddress = addressobj[0].firstChild.data
thePhone = phoneobj[0].firstChild.data
theEmail = emailobj[0].firstChild.data
showAddress(theName, theAddress , thePhone)
getRecent()
mostRecentName = firstobj[0].firstChild.data
setRecent(mostRecentName)
found = 1
} // end if #2
else { // else #2
firstobj = listings[i].getElementsByTagName("FIRST")
lastobj = listings[i].getElementsByTagName("LAST")
addressobj = listings[i].getElementsByTagName("ADDRESS")
phoneobj = listings[i].getElementsByTagName("PHONE")
emailobj = listings[i].getElementsByTagName("EMAIL")
theName = firstobj[0].firstChild.data+" "+lastobj[0].firstChild.data
theAddress = addressobj[0].firstChild.data
thePhone = phoneobj[0].firstChild.data
theEmail = emailobj[0].firstChild.data
showAddress2(theName, theAddress , thePhone)
} // end else #2
if ((firstString.match(pattern)&&Entered.length<firstName.length)) {
document.getElementById("Name").innerHTML = document.getElementById("Name").innerHTML + "<BR/>" +
"Possible match: " + firstobj[0].firstChild.data
found = 1
} // end if
} // end for
} // end else #1
} // end if #1
} //end handleResponse()
</script>
</head>
<body onLoad="checkCookie();load()">
<div id="frame">
<div id="top">
<div id="welcome"></div>
<input type="button" value="If this is not your name click to change it " onClick="resetCookie()">
</div>
<br/><br/>
<form id="search">
<input type="text" id="name" onkeyup="handleResponse()">
<input type="button" value="Search Phonebook" onClick="sndReq()">
</form>
<div id="map" style="width: 500px; height: 300px"></div>
<div id="container">
<div id="Name"></div>
<div id="address"></div>
<div id="phone"></div>
<a id ="email" href="javascript: window.location = 'mailto:' + document.getElementById('email').value;">Email</a>
<div id="pic">
<img src="images/phonebook.jpg" id="photo" width="150" height="150" border="0" alt=""/>
</div>
</div>
<div id="recent">
Most Recent Searches: <br/>
Last search:<a id="R1" href="javascript:document.getElementById('name').value=R1.innerHTML;sndReq()"></a>
<br/>
2nd last search:<a id="R2" href="javascript:document.getElementById('name').value=R2.innerHTML;sndReq()"></a>
</div>
</div>
</body>
</html>
From your code, it looks like the link’s text (“Email”) is replaced with the actual email address. So therefore all you would need is this:
var email = document.getElementById('email');
email.firstChild.nodeValue = 'mailto:' + email.firstChild.nodeValue;
It would have to run after your other code.
This will of course not work at all if javascript is disabled, as JimmyP pointed out. As an example, this is what I use on my website to stop my email address getting harvested:
var emailchange = function() {
var a = ['f','a','r'].reverse().join('') + '@' + window.location.hostname, b = document.createElement('a'), c = document.getElementById('e');
b.appendChild(document.createTextNode(a));
b.href = ['o','t','l','i','a','m'].reverse().join('') + ':' + a;
c.replaceChild(b, c.firstChild);
}
It operates on this:
<address id="e">raf @ this domain</address>
Admittedly some of it is probably overkill (like the reverse()) but I wanted to make sure. 
Thanks raffle. I would like to do it without calling a new function, do you think it’s possible?
I tried your code that way, directly in the html section:
<a href="javascript: window.location = 'mailto:' +document.getElementById('email').firstChild.nodeValue;">Email</a>
It doesn’t work.
Any suggestion appreciated
It’s so frustrating, i hate this bloody language 
Cheers