Passing 2 value from 2 dropdown into 3rd dropdown - php

Question

I have tried passing value on 3rd drop down but it doenst receive any of it
it doesnt show error but it doesnt get any data from 2 dropdowns Im new to just and im trying something but it doesnt work at all pls help thank you very much
dropdown.php
<select class="form-control" style="font-size: 21px;" name="Building" id="Building" onChange="change_floor(this.value)">
<option>Select</option>
<?php
$res=mysqli_query($conn,"select * from Building");
while($row=mysqli_fetch_array($res)){
?>
<option value="<?php echo $row['Building']; ?>"><?php echo $row['Building'];?></option>
<?php
}
?>
</select>
<select class="form-control" style="font-size: 21px;" name="floor" id="Floor" onChange="change_floor(this.value)">
<option>Select</option>
<?php
$res=mysqli_query($conn,"select * from floor");
while($row=mysqli_fetch_array($res)){
?>
<option value="<?php echo $row['Floor']; ?>"><?php echo $row['Floor'];?></option>
<?php
}
?>
</select>
<div id="Dept"></div>
</div>
</div>
<script type="text/javascript ">
function change_floor(str,str1) {
if (str.length == 0) {
document.getElementById("Dept").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Dept").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "deptajax.php?q="+str+"&d="+str1, true);
xmlhttp.send();
}
}
</script>
deptajax.php
If I use request here i shows error but if I use GET i doesnt show any error what is more usable for this scenario?
<?php
$link=mysqli_connect("localhost","id5592115_retep","Password");
mysqli_select_db($link,"id5592115_admin");
$q = $_REQUEST["q"];
$d = $_REQUEST["d"];
$res=mysqli_query($link,"select * from depttable where Flr='$d' and
Building='$q' order by deptname asc");
echo "<form method='get' action='table2.php'>";
echo '
<select class="form-control" style="font-size: 21px;" name="dept">
';
while ($row=mysqli_fetch_array($res)) {
$deptid = $row['deptid'];
$deptname = $row['deptname'];
echo "<option value='".$deptname."'>".$deptname."</option>";
}
echo "</select>";
echo '<button type="submit" class="btn btn-light
btnmove">Submit</button>';
echo "</form>";
?>

Answer 1

Your onclick function is call every time you select any of the dropdown , so at a time only one value is passed i.e : either str or str1 will have value . Instead to avoid this you can do like below :
When first selectbox is selected try to store it value in some variable like below :
<select class="form-control" style="font-size: 21px;" name="floor" id="Floor"
onChange="change_floor1(this.value)">
<!--^ make another function with name change_floor1-->
<option>Select</option>
...
</select>
Then in your <script></script>do like below :
var s; // declare globally
function change_floor1(str) {
s=str; //assigning value of first-select box in "s"
}
function change_floor(str1) {
if (str1.length == 0) {
document.getElementById("Dept").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Dept").innerHTML = this.responseText;
}
};
//passing both value
xmlhttp.open("GET", "deptajax.php?q="+s+"&d="+str1, true);
xmlhttp.send();
}
}