I’m trying to implement an AJAX application where the user enters the id of a user, all the information associated with the id will be filled in the remaining text fields. For example, when the user enters the id number, “1234”, the lastname, firstname, favorite color and favorite number fields automatically get filled with the information found in the mysql database for that id. From there the user will be able to see all the current information associated with that particular id and make changes.
Below is my script, however when I run this, all the values that are returned read “undefined”. When I run for errors via firebug, a GET response is made: the response simply reads:
SELECT * from users where id = \”$id\”
Any idea what might be wrong?
<html>
<head>
<script type = "text/javascript">
var xhr;
if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
function callServer()
{
// Create the id number
var id = document.getElementById("id").value;
// Create regular expressions
var reg1 = /\d{4}/;
// Test the string against the regular expression
if (reg1.test(id))
{
var idCheck = id;
}
else
{
alert ("Invalid id number");
return;
}
// Build the URL to connect to
var url = "(restofurl).../dataExtract.php?idCheck=" +escape(idCheck);
// Open a connection to the server
xhr.open("GET", url, true);
// Setup a function for the server to run when it is done
xhr.onreadystatechange = updatePage;
// Send the request
xhr.send(null);
}
function updatePage()
{
if ((xhr.readyState == 4) && (xhr.status == 200))
{
var response = xhr.responseText.split(",");
var reg3 = /\S+/;
if (!reg3.test(document.getElementById("lastname").value))
{
document.getElementById("lastname").value = response[1];
}
if (!reg3.test(document.getElementById("firstname").value))
{
document.getElementById("firstname").value = response[2];
}
if (!reg3.test(document.getElementById("color").value))
{
document.getElementById("color").value = response[3];
}
if (!reg3.test(document.getElementById("number").value))
{
document.getElementById("number").value = response[4];
}
}
}
</script>
</head>
<body>
<form method = "POST" action = "<?php echo $_SERVER['PHP_SELF']; ?>">
<p>Update Database:</p>
<p>ID:<input type = "id" id="id" name="id" size="20" maxlength="40" onchange = "callServer();" /></p>
<p>Update Last Name:<input type = "lastname" id="lastname" name="lastname" size="20" maxlength="40" /></p>
<p>Update First Name:<input type = "firstname" id="firstname" name="firstname" size="20" maxlength="40" /></p>
<p>Update Favorite Color:<input type = "color" id="color" name="color" size="20" maxlength="40" /></p>
<p>Update Favorite Number:<input type = "number" id="number" name="number" size="20" maxlength="40" /></p>
<input type="submit" id="submit" name ="submit" value="Update" /><br><br>
</form>
</body>
</html>
dataExtract.php
<?php
// Connect to the MySQL database
$con = mysql_connect("server","user","password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("tablename", $con);
$id = $_GET["id"];
$table = "users";
$query = 'SELECT * from $table where id = \"$id\"';
$result = mysql_query($query) or trigger_error(mysql_error().$query);
if (empty($result))
{
$response = " , , , ";
}
else
{
$row = $result->fetch_row();
$response = $row[1].",".$row[2].",".$row[3].",".$row[4];
echo $response;
}
// Close connection to the database
mysql_close($con);
?>
You have used $table in single quotes in the query resulting in ‘select * from $table…’ being executed by MySQL. Similarly, you have add backslash to double quotes which is not needed when you are using single quotes for specifying string literal.