I am working on a code where in my html file i have a dropdown list. On selecting a particular value I am calling a javascript function which in turn creates xhttp object and passes it through GET method to php file. The php file executes a query and is supposed to return another dropdown list which is to be reflected in the original html file. I have tried running the php file explicitly and it is working fine , but I for some reason I am not able to reflect the output in html file. Please help me through it. here are the snippets of the code I am currently using
<form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<select id = "state" onchange = "changeLocation()">
<option value="none"> State </option>
<?php
$result = $conn->query("SELECT DISTINCT state FROM office");
foreach ($result as $row)
{
echo "<option value=$row[state]>$row[state]</option>";;
}
?>
</select>
</form>
The dropdown fetches the distinct states from my table office.
the script used is
<script type="text/JavaScript">
function changeLocation()
{
var x= document.getElementById("state").value;
var xhttp
if (window.XMLHttpRequest)
{ // Mozilla, Safari, ...
xhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{ // IE 8 and older
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","localhost/location.php?t=" + x,true);//variable being sent is t
xhttp.send();
xhttp.onreadystatechange = function()//error checking required
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("location").innerHTML = xmlhttp.responseText;
}
else
{
alert("needs Debugging");
}
}
}
</script>
and the php file that is used is this , in this what im trying is create a dropdown list over here and reflect the same in my HTML file, Im not sure this is the right method to do so but I found this example http://www.w3schools.com/php/php_ajax_database.asp, here they display the result in the form of a table so i figured if the result was to be displayed in the form of any HTML element it might have to be done in the .php file.
query("SELECT DISTINCT location FROM office where state = '".$t."'");
echo "";
while ($row = $result->fetch_assoc())
{
echo "$row[location]
";
}
echo "";
mysqli_close($conn);
?>
I have just started with ajax so am not really aware where am I going wrong , so your help would be really appreciated and I want able to find much troubleshoot for using ajax with javascript and mysql.
