Hi all.

How do I link a cookie, presented in a div, to a text box on the same page - so it can be searched?

Now I have a search box that link to the Google Maps API. I also have the two most recently search items to show up as cookies below the map. My goal is to have the cookies show up as links so that when you click them, they show up in the text box to search.

I'm thinking of three ways to do this and wonder which is the best way to do it.

1) Can I just adjust the div tag to link to the text box?

2) Can I adjust the function relating to how the cookies are posted on the page?

3) Do I have to make a new function to post the cookies as links?

Any input is appreciated

Code:

<html>

<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">

var recent1 = initCookie("recent1")
var recent2 = initCookie("recent2")

function initCookie(cookieName){

if (document.cookie.indexOf(cookieName + "=") == -1){
return ""
}

else {
return getCookie(cookieName)
}

}

function getCookie(cookieName){

start=document.cookie.indexOf(cookieName + "=") + cookieName.length + 1
end=document.cookie.indexOf(";", start)

if (end == -1){
end = document.cookie.length
}

cookieLength=end-start
return(document.cookie.substr(start,cookieLength))

}


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")
}

}

var geocoder;
var map;
var marker;

function load() {

getRecent()
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP

}
map = new google.maps.Map(document.getElementById("mymap"), myOptions);
}


function showAddress(theAddress) {
var myaddress = theAddress

if (geocoder) {
geocoder.geocode( { 'address': myaddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);

var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});



} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}



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() {
http.open('get', 'ajaxphone.xml', true)
http.onreadystatechange = handleResponse
http.send(null)
}

function handleResponse() {

if(http.readyState == 4){

document.getElementById("theName").innerHTML = ""
document.getElementById("address").innerHTML = ""
document.getElementById("phone").innerHTML = ""
document.getElementById("email").innerHTML = ""

var response = http.responseXML.documentElement
listings=response.getElementsByTagName("LISTING")

for (i=0;i<listings.length;i++) {

firstobj = listings[i].getElementsByTagName("FIRST")

if (firstobj[0].firstChild.data == document.getElementById("first").value){

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")

document.getElementById("theName").innerHTML = firstobj[0].firstChild.data + " " + lastobj[0].firstChild.data
document.getElementById("address").innerHTML = addressobj[0].firstChild.data
document.getElementById("phone").innerHTML = phoneobj[0].firstChild.data
document.getElementById("email").innerHTML = emailobj[0].firstChild.data

theAddress = addressobj[0].firstChild.data
showAddress(theAddress)

getRecent()

mostRecentName = firstobj[0].firstChild.data
setRecent(mostRecentName)


}
}
}
}




</script>
</head>

<body onload="load()">
<br/>

<form id="search">
<input type="text" id="first" />
<input type="button" value="Search Phonebook" onClick="sndReq()" />
</form>
<div id="theName"></div>
<div id="address"></div>
<div id="phone"></div>
<div id="email"></div>
<div id="mymap" style="width: 500px; height: 300px"></div>
<div id="recent">
Most Recent Searches
<ul>
<li id="R1"></li>
<li id="R2"></li>

</ul>
</div>
</body>

</html>