CodingForums.com - how to make it clickable

CodingForums.com (http://www.codingforums.com/index.php)

- DOM and JSON scripting (http://www.codingforums.com/forumdisplay.php?f=15)

- - how to make it clickable (http://www.codingforums.com/showthread.php?t=287786)

how to make it clickable

i have this contacts.txt (from notepad)

kate|female|kathryn bailey beckinsale|26-jul-1973|#23 underworld drive|(621) 142-7827|kate@lycans.net
jessica|female|jessica claire biel|03-mar-1982|27 texas avenue|(53)2344223|jbiel@yahoo.com
johnny|male|john christopher depp ii|09-jun-1963|711 pirate road|(773) 476-6634|jsparrow@piratebay.org

this is html and javascript:

<html>
<head>
<title>Practice</title>
<link rel="stylesheet" type="text/css" title="Preferred" href="css.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function syncText() {
var xhr = new XMLHttpRequest();
xhr.open("get", "data/contacts.txt", false);
xhr.send(null);

if (xhr.status == 200) {
var data = xhr.responseText;
var items = data.split("\n");
items.sort();
var frag = document.createDocumentFragment();

for (i=0; i<items.length; i++){
els = items[i].split("|");
li = document.createElement("li");
li.innerHTML = els[0];
frag.appendChild(li);

}
document.getElementById("list").appendChild(frag);

} else {
alert("data retrieval failed...");
}
}

</script>

</head>

<body onload="syncText()">

<div id="header">
<h1>My Contacts</h1>
<img src="data/resources/contacts.png" alt="Contacts" />
</div>

<div>
<h2>Contact List</h2>
</div>

<div id="header2" style="overflow:scroll;">
<ul id="list"></ul>
</div>

<div>
<h3>Contact Details</h3>
</div >

<div id="header3">
<form>
<table>
<tr>
<td>name:</td>
<td><input type="text" id="ajaxName" name="name"><td>
</tr>
<tr>
<td>birthday:</td>
<td><input type="text" id="ajaxBday"name="bday"><td>
</tr>
<tr>
<td>address:</td>
<td><input type="text" id="ajaxAddress"name="address"><td>
</tr>
<tr>
<td>phone: </td>
<td><input type="text" id="ajaxPhone"name="phone"><td>
</tr>
<tr>
<td>email:</td>
<td><input type="text" id="ajaxEmail"name="email"><td>
</tr>
</table>
</form>
</div>

</body>
</html>

the problem is how to be able to click the retrieved names and place it in the forms...

just eyeballing it, I'd say it would be something like this:

Code:

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

els = items[i].split("|");

li = document.createElement("li");

li.innerHTML = els[0];

frag.appendChild(li);

li.onclick=function(){

document.getElementById("ajaxName").value=this.innerHTML;

}

}

completely untested, but something like that...

wow.. thankz.. im really happy...

how about if I put the other like the email address.?

i made

for (i=0; i<items.length; i++){
els = items[i].split("|");
li = document.createElement("li");
li.innerHTML = els[0];
frag.appendChild(li);

p = document.createElement("li");
p.innerHTML = els[6];

li.onclick=function(){
document.getElementById("ajaxName").value=this.innerHTML;
document.getElementById("ajaxEmail").value=p.innerHTML;
}
}

but the email is not changing.. it's steady

assuming that everything else works, I think it would be more like:

Code:

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

els = items[i].split("|");

li = document.createElement("li");

li.innerHTML = els[0];

frag.appendChild(li);

li.onclick=function(){

document.getElementById("ajaxName").value=this.innerHTML;

}

p = document.createElement("li");

p.innerHTML = els[6];

p.onclick=function(){

document.getElementById("ajaxEmail").value=this.innerHTML;

}

}

although I can't see where you're appending the second li