SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dynamicly genarated mailto

    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?

  2. #2
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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>
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jake Arkinstall View Post
    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>

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •