dropdown list not populating with Ajax
Question
Whilst I'm sure it must be something really obvious, I can't see where I am going wrong with this. I have a drop down list with two options in it. When I Select an option it should use XMLHttpRequest() to get a list of customers from the database, based on the option selected.
I have two parts:
ajax2_js.php - contains the javascript and html form.
ajax2_DBAccess.php - contains the PHP that gets the list from the databse.
I have checked everything on the second page, and this works fine on it's own (and displays the relevant list as a dropdown menu), but when I select the option on the first page, nothing happens.
My code thus far is:
ajax2_js.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function ajaxFunction()
{
var ajaxRequest;
ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
document.getElementById('customerDiv').innerHTML=req.responseText;
}
}
ajaxResuest.open("GET", strURL, true);
ajaxRequest.send(null);
}
</script>
</head>
<body>
<form method="post" action="" name="form1">
Network : <select name="network" onChange="ajaxFunction('ajax2_DBAccess.php?network='+this.value)">
<option value="">Select Network</option>
<option value="1">Net1</option>
<option value="2">Net2</option>
</select>
</br>
Customer : <div id="customerDiv">
<select name="select">
<option>Select Customer</option>
</select>
</div>
</form>
</body>
ajax2_DBAccess.php
<?php
$network=$_GET['network'];
$q1 = "SELECT `CustName` FROM monitor.customers where network = $network;";
$con = new mysqli('localhost:3306', 'xxx', 'xxx');
if (mysqli_connect_errno())
{
$error = mysqli_connect_error();
echo $error;
exit();
}
else
{
$ConfRes = mysqli_query($con, $q1);
if ($ConfRes)
{
echo "<select name=\"Customers\">";
echo "<option>Select Customer</option>";
while($row=mysqli_fetch_array($ConfRes, MYSQLI_ASSOC))
{
$result = $row['CustName'];
echo "<option value>$result</option>";
};
echo "</select>";
}
else
{
$error = mysqli_error();
echo $error;
exit();
}
};
?>
Any assistance would be appreciated.
3 answers
solution1
0 2012-09-27 09:44:56
Check the javascript error log. This might be the problem, a spelling error in "Request". ajaxResuest.open("GET", strURL, true);
Also, your SQL query suffers from an SQL injection vulnerability in the $network parameter.
solution2
0 2012-09-27 09:53:26
You can either use XML or JSON to return list. This tutorial should help. I personally would use XML.
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("CustName",$row['CustName']);
}
echo $dom->saveXML();
but there are plenty of tutorials on both methods.
solution3
0 2012-09-27 10:35:09
Thanks for all your help guys, I have tracked it down to three things (all my fault):
function ajaxFunction()
should be:
function ajaxFunction(strURL)
.
ajaxResuest.open("GET", strURL, true);
should be:
ajaxRequest.open("GET", strURL, true);
.
and finally:
document.getElementById('customerDiv').innerHTML=req.responseText;
should be
document.getElementById('customerDiv').innerHTML=ajaxRequest.responseText;
.
(and of course the SQL injection vulnerability mentioned above which I will also fix).
cheers.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.