dynamicly genarated mailto

**thebrad** · Mar 5, 2010 21:20

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?

**Jake Arkinstall** · Mar 6, 2010 04:34

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:

Code html:

<a href="javascript: window.location = 'mailto:' + document.getElementById('email').value;">Email</a>

Code html:

<span onclick="window.location = 'mailto:' + document.getElementById('email').value;">Email</span>

Code html:

<button onclick="window.location = 'mailto:' + document.getElementById('email').value">Email</button>

**JimmyP** · Mar 6, 2010 05:06

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.

**thebrad** · Mar 6, 2010 14:48

Originally Posted by Jake Arkinstall

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:

Code html:

<a href="javascript: window.location = 'mailto:' + document.getElementById('email').value;">Email</a>

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 Code:

<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+"&nbsp;"+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+"&nbsp;"+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>

**Raffles** · Mar 6, 2010 15:33

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:

Code:

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:

Code javascript:

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:

HTML Code:

<address id="e">raf @ this domain</address>

Admittedly some of it is probably overkill (like the reverse()) but I wanted to make sure.

**thebrad** · Mar 6, 2010 17:28

Originally Posted by Raffles

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:

Code:

var email = document.getElementById('email');
email.firstChild.nodeValue = 'mailto:' + email.firstChild.nodeValue;

It would have to run after your other code.

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:

Code:

<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

User Tag List

Thread: dynamicly genarated mailto

Thread Tools

Display

dynamicly genarated mailto

Bookmarks

Bookmarks

Posting Permissions