PHP/Javascript: Javascript not sending data to PHP - php

Question

I'm making a search system whereby the user enters data into a text area and when he presses 'enter', the search text is sent to the php search query via javascript so that the page doesn't have to reload.
Javascript:
<script type="text/javascript">
function search(str)
{
if (str=="")
{
document.getElementById("search").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{//IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("search").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","leaderboard.php?q="+str,true);
xmlhttp.send();
}
</script>
Text input:
<form>
<input type="text" value="search for user" onfocus="if
(this.value==this.defaultValue) this.value='';" onblur="if (this.value!==this.defaultValue) this.value='search for user';" id="search" name="search" style="background-color: white; color: black; border: 1px solid black; font-family: verdana; font-size: 9px; height: 20px; text-align: center;" onchange="search(this.value)">
</form>
PHP:
<?php
$con = mysql_connect('localhost', 'refrigerator', 'XXX');
mysql_select_db('refrigerator');
if($q=$_GET["q"]){
$sql="SELECT * FROM users WHERE username = '".$q."'";
$result = mysql_query($sql);
$User = array(); $Count = array(); $t=0; $i=0;
while($row = mysql_fetch_array($result)){
$User[] = $row['username']; $Count[] = $row['count'];
$t=mysql_num_rows($sql);
}
echo '<tr><td>' .$a. '</td><td>'.$row['username'].'</td><td>'.$row['count'].'</td></tr>';
mysql_close($con);
}
if ($q=!$_GET["q"]){
$User = array(); $Count = array(); $t=0; $i=0;
while($row = mysql_fetch_array($result)){
$User[] = $row['username']; $Count[] = $row['count'];
$t=13;
}
$User[] = $row['username']; $Count[] = $row['count'];
while($i<$t) {
$a = $i + 1;
echo '<tr><td>' .$a. '</td><td>'.$User[$i].'</td><td>'.$Count[$i].'</td></tr>';
$i++;
}
}
?>
The javascript definitely works up to the penultimate line, because the url changes to 'http://localhost/%5bclickphilia%5d/leaderboard.php?search=whatever was searched' but then nothing happens.
I'm very new to this so I might have made a blindingly obvious mistake so don't rule out that possibility :D
Thanks
EDIT:
Here is the full code for the table including the php:
<table border="0" cellspacing="15" padding="0" width="200">
<th><font color="#00FF00">Rank</font></th>
<th><font color="#00FF00">Username</font></th>
<th><font color="#00FF00">Score</font></th>
<?php
$con = mysql_connect('localhost', 'refrigerator', 'XXXX');
mysql_select_db('refrigerator');
if($q=$_GET["q"]){
$sql="SELECT * FROM users WHERE username = '".$q."'";
$result = mysql_query($sql);
$result=mysql_real_escape_string($result);
$User = array(); $Count = array(); $t=0; $i=0;
while($row = mysql_fetch_array($result)){
}
echo '<tr><td>' .$a. '</td><td>'.$row['username'].'</td><td>'.$row['count'].'</td></tr>';
mysql_close($con);
}
if ($q=!$_GET["q"]){
$User = array(); $Count = array(); $t=0; $i=0;
while($row = mysql_fetch_array($result)){
$User[] = $row['username']; $Count[] = $row['count'];
$t=13;
}
$User[] = $row['username']; $Count[] = $row['count'];
while($i<$t) {
$a = $i + 1;
echo '<tr><td>' .$a. '</td><td>'.$User[$i].'</td><td>'.$Count[$i].'</td></tr>';
$i++;
}
}
?>
</table>
I'm sure the inserting the php echo into the table works, because the event for if ($q=!$_GET["q"]) works fine. The data is entered into the table okay.

Answer 1

Well this line here:
document.getElementById("search").innerHTML=xmlhttp.responseText;
doesn't make sense to me. The "search" element is that <input> field. Setting that element's "innerHTML" property may do nothing at all to the page, because "text" input elements are "void" elements and have no content.
Maybe you've got a "search_results" table somewhere? If so, you may have some trouble updating the "middle" of a <table> like that, in IE at least. Try it however and you should be able to mess with that to come up with something.
edit — I'll re-state what I think the problem is: your PHP code seems to be putting together the response to the search in some sort of table form; it's creating <tr> and <td> elements. Those need to go into a <table> somewhere (actually technically a <tbody> but whatever). Exactly how, or even if, you want to refine that, I can't say. What you might try however is to add this to your page:
<div id='search_results'>Results Go Here</div>
and put it just somewhere where it'll show up. Then change your "search()" function so that wherever you're setting "innerHTML", change the "id" you search for to "search_results".

Answer 2

I'm assuming you want to implement a kind of autocomplete.
I think this line:
document.getElementById("search").innerHTML=xmlhttp.responseText;
should be:
document.getElementById("search_result").value=xmlhttp.responseText;
You need to have a search_result table, as Pointy pointed out.
In case you are interested in going the jQuery route, this would be your new code:
function search(str){
if (str != "")
$.get("leaderboard.php", {q : str}, function(r){
$("#search_result").html(r);
});
}
If you want to use the Enter key, I would (again) recommend jQuery because you can accomplish this with a few lines of code, instead of several more with pure JavaScript.

Answer 3

Wow. Hard to know where to begin.
I think you're going to get more help if you give us more of an idea of what you're trying to accomplish. I'm thinking you're trying to build an inline search?
If your URL is changing then the form is getting submitted somehow. Since you're using AJAX that's probably not what you want. Add onSubmit="return false;" to the form element. That may solve your immediate problem. (though I'm not sure that onChange will work right cross browser. See #2)
Look at jQuery for AJAX and for DOM manipulation. It's a lot easier than what you're trying to build it using the native tools.
Your query won't work and it's a security problem. Right now anyone can send SQL commands in your q parameter and depending on permissions probably do whatever they want with your database. Look at mysql_real_escape_string() or better yet look at a database framework that uses place holders such as PDO. As for the query itself you're only going to find people with the exact match. You probably want to use LIKE rather than equals.