I created 3 drop down list in my html. For the first drop down, once user selects an option, a function is called on onchange. This runs a php script on the server and then updates the second drop down list. However, After it updates the second drop down list, the third drop down list disappears. Is there anything wrong with my code? If so, how should I change it to?
.html
<script type="text/javascript">
function showApplications(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("appname").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("appname").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getApplications.php",true);
xmlhttp.send(null);
}
</script>
<script type="text/javascript">
function showTargets(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("target").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("target").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getTargets.php",true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<form action="post">
Environment:
<select name="customers" onchange="showApplications(this.value)">
<option value="Environment">Select an environment:</option>
<option value="SandBox">Sandbox</option>
<option value="Production">Production</option>
</select>
</br>
</br>
Application Name: <div id="appname">
<select name="customers" onchange="showTargets(this.value)">
<option value="">Select application:</option>
</select>
Target: <div id="target">
<select name="select">
<option>Select one option</option>
</select>
</div>
</form>
</br>
</body>
</html>
.php
<?
$link = mysql_connect("127.0.0.1:3306", "root", "");
if(!$link){
die('Could not connect: ' . mysql_error());
}
mysql_select_db("PushApplication");
$query="SELECT AppName FROM Applications";
$result=mysql_query($query);
?>
<select name="state" onchange="showTargets(this.value)">
<option>Select application</option>
<? while($row=mysql_fetch_array($result))
{
?>
<option value=<?=$row['AppName']?>><?=$row['AppName']?></option>
<?
}
?>
</select>
You’re missing a close tag for your element
<div id="appname">. Close it up after your select element and your script should work just fine.