Updating values of one dropbox after changing the value of another? PHP/JavaScrip(AJAX)

Question

I am following the tutorial on JavaScript AJAX for interactive communication with a database. However, with slight differences I managed to get the code working here as well - I am using PDO, whilst the tutorial is explicitly mysql.

Currently, I have been trying to figure out on my own how to get a value from one dropdown menu to act out as a 'key' for populating another dropdown box. The idea I have is to choose a department, which are represented by numbers, and after a department is chosen it should populate the second dropdown menu with users from database but the first value as a key value for column in a database table.

I believe that I have done the code correctly but I get Error 500. Bellow is the error log I get:

showCustomer    @ Archive.php:114
onchange    @   Archive.php:49
ListPicker._handleMouseUp 

Row 114 is xhttp.send(); and I am quite unsure what sort of problem this might cause.

Row 49 is <select id="DEPT" name="DEPT" onchange="showCustomer(this.value)">.

I am really confused about this whole thing I tried to do it on my own but these errors are a bit too elusive for me.

Bellow is code that I have adapted for minimal complexity and maximum understanding as I removed the pointless for the problem bits. I hope that it is clear enough.

---

Archive.php:

<form action= "<?php $_PHP_SELF ?>" method = "GET">
<select id="DEPT" name="DEPT" onchange="showCustomer(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>                                                               
</select>

<div id="txtHint">
<select></select>                            
</div>          
</form>

<script>
function showCustomer(str) 
{
console.log(str);
var xhttp;  
if (str == ""){
document.getElementById("txtHint").innerHTML = "";
return;
}

xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() 
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("txtHint").innerHTML = this.responseText;
}
};

xhttp.open("GET", "AJAX_connect_&_query.php?q="+str, true);
xhttp.send();
}
</script>

---

AJAX_connect_&_query.php:

<?php
    echo $q;

    $sql = "SELECT FIRST_NAME, MID_NAME, LAST_NAME from users WHERE DEPT='".$q."';";

    $stmt = $GLOBALS['conn']->prepare($sql);
    $stmt = $stmt->execute();

    $data=$stmt->fetch(PDO:FETCH_ASSOC);

    echo "<select>";
    foreach ($data as $row)
    {
        echo "<option>".$row['FIRST_NAME']." ".$row['MID_NAME']." ".$row['LAST_NAME']."</option>";
    }
    echo "</select>";
?>

Answer 1

You need to get $q from either the $_POST or the $_GET superglobals (in your case $_GET).

You start talking about $q before defining it.

Look in your error_log and I'm sure it will tell you as much!