Dynamically populating Selectboxes from Database - php

Question

hope you can help as I'm starting to pull my hair out :) There seems to be loads of links around regarding this but I can't get any of them to work, so I'm just going to ask in straight laymans terms.
I have a database... it has fields for Region, Area, Manager, Employee
I have a front end form, with select boxes in it...
When you choose the Region, I need the Area selectbox to dynamically populate with the relevant areas from the database without refreshing the page
Then when the Area selct option is chosen the Manager one needs to populate. and so on.
No doubt this needs an ajax/ Jquery solution, of which as I've said there's many articles around about this but I just cannot get them to work. I've NEVER even attempt AJAX before today so sincere apologies if this is a total noob thing to be asking.
Any help or guidance would be greatly appreciated. Thankyou!
Okay I have this for my Jquery:
$(document).ready(function() {
$('#Region').change(function() {
// remove all options in Area select
$('#Area').html('');
// find the new Region selected
var selected_region = $('#Region').val();
// get new options from server and put them in your Area select
$('#Area').get('Ajax/getArea.php?Region=' + selected_region);
});
});
and this for my PHP:
<?php
// get province id passed in via `post` or `get`
$region = $_REQUEST['Region'];
// get the districts in that province
$query = "SELECT DISTINCT AREA FROM Sales_Execs WHERE Region ='$region'";
// link to your database
$link = mysqli_connect("localhost", "root", "", "Quality_Monitoring");
// execute your query
$result = mysqli_query($link, $query);
// parse the options
while($row = mysqli_fetch_assoc($result)) {
$options = "<option value=\"".$row['AREA']."\">".$row['AREA']."</option>\n ";
}
// send options
echo $options;
?>
And still no joy... can anyone spot what I'm missing?

Answer 1

try this, there are 3 different sections I have included in the code:
1) the PHP code
2) The jQuery
3) The select box container
:: Your PHP file (call it getArea.php)
$selectbox = '<select name="region" onchange="jQuery.selectRegion(this.value)">';
$region = $_REQUEST['Region']; /* Make sure you escape this */
$query = "SELECT DISTINCT AREA FROM Sales_Execs WHERE Region ='$region'";
$link = mysqli_connect("localhost", "root", "", "Quality_Monitoring");
$result = mysqli_query($link, $query);
$options = '';
while($row = mysqli_fetch_assoc($result)) {
$options .= '<option value="' . $row['AREA'] . '">' . $row['AREA'] . '</option>';
}
echo $selectbox;
echo $options;
echo '</select>';
exit;
:: Your jquery
jQuery.selectRegion = function selectRegion(regionId)
{
$.get('ajax/getArea.php?region='+regionId,function(data){
$('#select_container').html(data);
});
}
:: The select box container
<div id="select_container">
<select name="region" onchange="jQuery.selectRegion(this.value)">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Hope this helps