PHP & AJAX & MySQL integration

Question

I'm trying to get the code below working so that it will call a JS function to pass a value to my PHP file which will return a number of values from a MySQL database. This is part of an assignment I thought would be quite straightforward but I think my problem is with the JavaScript event handler - how to reference the input value maybe?

The HTML:

<form>
   <input type="text" name="users" onkeydown="showUser(this)"/>
</form>
        
<div id="txtHint">
    <p id="responder"><b>Person info will be listed here.</b></p>
</div>

The showUser() function:

<script type="text/javascript">
        function showUser(str)
        {
        if (str=="")
            {
            document.getElementById("responder").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("responder").innerHTML=xmlhttp.responseText;
                }
            }
        xmlhttp.open("GET","php/student_query.php?q="+str,true);
        xmlhttp.send();
        }
    </script>

The PHP:

<?php
$q=$_GET["q"];
// Step 1
$conn = mysql_connect("localhost", "root");
// Step 2
mysql_select_db("collegeData", $conn);
//Step 3

$sql="SELECT * FROM studenttable WHERE studentID = '".$q."'";
$result = mysql_query($sql);

// Step 4
while ($row = mysql_fetch_array($result))
{
// Step 5
echo "Hello $row[firstName] $row[lastName]<br/>";
echo "Your two course modules are $row[moduleNo1] and $row[moduleNo2]<br/>";
echo "<tr><td> $row[firstName]</td><td> $row[lastName] </td> <td> $row[studentID] </td> </tr>";
echo "<br/>";
}
// Step 6
mysql_close($conn);
?>

Like I said, i think my problem is in the event handler, I'm not great with JS. I'd appreciate any help.

score 1 · Accepted Answer · answered Mar 02 '12 at 19:30

1

Looks like you're sending the input element to your function, not it's value. Try

<input type="text" name="users" onkeydown="showUser(this.value);" />

Also, you should protect your database query from protection by changing your PHP to

$q = mysql_real_escape_string(trim($_GET["q"]));
if($q == "")
{
    echo "";
    exit;
}

answered Mar 02 '12 at 19:30

Aaron W.

9,254
2
34
45

I also think it might be coming from the onkeydown - Did you test your solution? – Chan Mar 02 '12 at 20:02
No I didn't test. May be better to use `onkeyup` for this case – Aaron W. Mar 02 '12 at 20:08
Hi, thanks. I had tried 'this.value' with 'onchange' but it hadn't worked. This now works with 'onkeyup' and 'this.value'. Can you tell me how i would trigger the event by using the Enter/Return key? 'on change' won't work for me. Thanks – garethdn Mar 02 '12 at 22:41
http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box – Aaron W. Mar 02 '12 at 22:48

PHP & AJAX & MySQL integration

1 Answers1