Basically I have three dynamic dropdowns
The first one shows the categories
The second one displays the sub category under the category that I chose on the first dropdown
The third one displays the topics under the sub category that I chose on the second dropdown. This file is called testdropdown.php
<?php
$con = mysqli_connect("localhost","root","","imetrics");
?>
<form name="form1" action="" method="POST">
<table>
<tr>
<td>Select Category</td>
<td>
<select id="categorydd" onChange="change_category()">
<option>--None Selected--</option>
<?php
$query=mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID IS NULL");
while($row=mysqli_fetch_array($query)) {
?>
<option value="<?php echo $row["category_id"]; ?>"><?php echo $row["categoryname"]; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Select Subcategory</td>
<td>
<div id="subcategory">
<select>
<option>-- None Selected--</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Select Topic</td>
<td>
<div id="topic">
<select>
<option>-- None Selected--</option>
</select>
</div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function change_category() {
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","ajax.php?category="+document.getElementById("categorydd").value,false);
xmlhttp.send(null);
document.getElementById("subcategory").innerHTML=xmlhttp.responseText;
if(document.getElementById("categorydd").value=="--None Selected--") {
document.getElementById("topic").innerHTML="<select><option>--None Selected--</option></select>";
}
}
function change_subcategory() {
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","ajax.php?subcategory="+document.getElementById("subcategorydd").value,false);
xmlhttp.send(null);
document.getElementById("topic").innerHTML=xmlhttp.responseText;
}
</script>
ajax.php
<?php
$con = mysqli_connect("localhost","root","","imetrics");
$category=$_GET["category"];
$subcat=$_GET["subcategory"];
if($category!="") {
$query=mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID =$category ");
echo "<select id='subcategorydd' onChange='change_subcategory()'>";
echo " <option>--None Selected--</option>";
while($row=mysqli_fetch_array($query)) {
echo "<option value='$row[category_id]' selected>"; echo $row["categoryname"]; echo "</option>";
}
echo "</select>";
}
if($subcat!="") {
$query=mysqli_query($con, "SELECT * FROM topic WHERE SubCat = $subcat ");
echo "<select>";
echo " <option>--None Selected--</option>";
while($row=mysqli_fetch_array($query)) {
echo "<option value='$row[topic_id]' selected>"; echo $row["title"]; echo "</option>";
}
echo "</select>";
}
?>
After clicking data from
First dropdown it pops up this error Notice: Undefined index: subcategory in C:\xampp\htdocs\new\ajax.php on line 5.
Then after clicking data from
Second dropdown it pops up this error Notice: Undefined index: category in C:\xampp\htdocs\new\ajax.php on line 4.
That's the first weird thing.
The second weird thing is the function change_subcategory() in testdropdown.php. I think that means it can't find the function but the code is working fine.
