Undefined Javascript Variable

So I’m building a web app that asks users questions related to a resume and then I take that data and convert it into a pdf with proper formatting (I’m going to be put an ad on the bottom of the free version and if users don’t want that advertisement I’ll sell them the full version for $20).

Right now I’m working on a auto fill feature for when users start to enter their college name. My main purpose for doing this is to eliminate variety among college names so I can get an accurate count of what schools the users of my apps went to so that in the future if I want to go to the schools with the alumni’s that use my app the most and perhaps strike a promotion deal with that school for new grads.

So now to my problem now that I filled you in on the project overview. I retrieve the names for the schools through a sqlite database that uses php. The variables print on my screen fine, but when I click on one of the potential schools and put that value into the input box value it shows as undefined.

my semi-working model:

Here’s my code split into html, php and javascript:
HTML

<html>
<head>
<style type="text/css">
#schools{
border:1px solid black;
max-width:15em;
min-width:5em;
max-height:10em;
overflow-y:scroll;
overflow-x:hidden;
}
</style>
</head>
<body>
<center>
<div id="all">
<form name="college_search">
School: <input type="text" name="search" id="type" onkeyup="showCollege(this.value)" width="15em" onblur="javascript:Clear()">
</form>
<div id="hidden">
</div>
</div>
</center>
</body>
</html>

Javascript

<script type="text/javascript">
function showCollege(str){
var school_div = "<div id="schools"></div>";

if (str==""){
document.getElementById("hidden").innerHTML="";
return;
}
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("hidden").innerHTML=school _div;
document.getElementById("schools").innerHTML=xmlht tp.responseText;
}
}
xmlhttp.open("GET","?search="+str,true);
xmlhttp.send();
}

function Clear(){
document.getElementById("hidden").innerHTML="";
}

function replace(abc){
document.getElementById("type").value=abc;
document.getElementById("hidden").innerHTML="";
}
</script>

PHP

<?php
$search = $_GET[‘search’];

try
{
//create or open the database
$database = new SQLiteDatabase(”, 0666, $error);
}
catch(Exception $e) {
die($error);
}
?>

<HTML>
<Head>
<style type="text/css">
#list{
text-align:left;
padding:0px 0px;
}
</style>
</Head>

<Body>
<ul type="none" id="list" style="none">

<?php
$query = "SELECT Name FROM College WHERE Name LIKE ‘%".$search."%’;";
if($result = $database->query($query, SQLITE_BOTH, $error)){
while($row = $result->fetch()){
print("<li><a id="school_list" href="javascript:replace(this.value)" value="{$row[‘Name’]}">{$row[‘Name’]}</a></li>");
}
}else{
die($error);
}
?>
</ul>
</Body>
</HTML>

someone helped me out in the programming forum. I noticed there was a forum just for programming after posting this.

I had to substitue this:

<li><a id="school_list" href="javascript:replace(this.value)" value="{$row[‘Name’]}">{$row[‘Name’]}</a></li>

for this:

<a id="school_list" href="#" onclick="replace(this.innerHTML); return false;">{$row[‘Name’]}</a><br>