Below I have a piece of code where it is suppose to display 2 drop down menus, one for building and other for rooms. What happens is when the user selects a building from the building drop down menu, using the ajax/jquery it will navigate to the room.php page and lists the rooms that belongs to the building selected and displays the list of rooms in the rooms drop down menu. This works fine:
<script type="text/javascript">
function getRooms() {
var building = jQuery("#buildingsDrop").val();
jQuery('#roomsDrop').empty();
jQuery('#roomsDrop').html('<option value="">Please Select</option>');
jQuery.ajax({
type: "post",
url: "room.php",
data: { building:building },
success: function(response){
jQuery('#roomsDrop').append(response);
}
});
}
</script>
...
<?php
$sql = "SELECT DISTINCT Building FROM Room";
$sqlstmt=$mysqli->prepare($sql);
$sqlstmt->execute();
$sqlstmt->bind_result($dbBuilding);
$buildings = array(); // easier if you don't use generic names for data
$buildingHTML = "";
$buildingHTML .= '<select name="buildings" id="buildingsDrop" onchange="getRooms();">'.PHP_EOL;
$buildingHTML .= '<option value="">Please Select</option>'.PHP_EOL;
while($sqlstmt->fetch())
{
$building = $dbBuilding;
$buildingHTML .= "<option value='".$building."'>" . $building . "</option>".PHP_EOL;
}
$buildingHTML .= '</select>';
$roomHTML = "";
$roomHTML .= '<select name="rooms" id="roomsDrop">'.PHP_EOL;
$roomHTML .= '<option value="">Please Select</option>'.PHP_EOL;
$roomHTML .= '</select>';
?>
room.php:
$building = isset($_POST['building']) ? $_POST['building'] : '';
$sql = "SELECT Room FROM Room WHERE Building = ?";
$sqlstmt=$mysqli->prepare($sql);
$sqlstmt->bind_param("s",$building);
$sqlstmt->execute();
$sqlstmt->bind_result($dbRoom);
$roomHTML = "";
while($sqlstmt->fetch()) {
$roomHTML .= "<option value='".$dbRoom."'>" . $dbRoom . "</option>".PHP_EOL;
}
echo $roomHTML;
The problem I am having though is the when a user selects an assessment, it is suppose to display the assessment's building and room options in the relevant drop down menus. But it is not selecting those options, they remain on the "Please Select" option. Why is this and how can I get the options shown?
Below is the view source code:
//Assessment drop down menu:
<p><strong>Assessments:</strong> <select name="session" id="sessionsDrop">
<option value="">Please Select</option>
<option value='71' style='color: green'>AKXMB - 30-11-2012 - 10:00</option>
</select> </p>
</form>
//Building drop down menu:
<select name="buildings" id="buildingsDrop" onchange="getRooms();">
<option value="">Please Select</option>
<option value='Canalside East'>Canalside East</option>
<option value='Canalside West'>Canalside West</option>
</select>
//Room drop down menu (list of rooms displayed in room.php):
<select name="rooms" id="roomsDrop">
<option value="">Please Select</option>
</select>
//Retrieve assessment information
//(Below is where problem lies where it is not selecting building and room options in drop down menu)
<script type="text/javascript">
$(document).ready( function(){
var sessioninfo = [{"SessionId":71,"Building":"Canalside East","Room":"CE01\/04"},{"SessionId":84,"Building":"Canalside East","Room":"CE01\/04"}];
$('#sessionsDrop').change( function(){
var sessionId = $(this).val();
if (sessionId !== '') {
for (var i = 0, l = sessioninfo.length; i < l; i++)
{
if (sessioninfo[i].SessionId == sessionId) {
var currentbuilding = $('#currentBuilding').val(sessioninfo[i].Building);
var editbuilding = $('#BuildingsDrop').val(sessioninfo[i].Building);
var currentroom = $('#currentRoom').val(sessioninfo[i].Room);
var editroom = $('#RoomsDrop').val(sessioninfo[i].Room);
var currentid = $('#currentId').val(sessioninfo[i].SessionId);
var editid = $('#newId').val(sessioninfo[i].SessionId);
break;
}
}
}
});
});
</script>
UPDATE:
In the application select a "Module" from drop down menu and submit.
Below it should show some features. In the Assessment drop down menu select any assessment.
You can see underneath that for "Current Assessment Details" it displays the building and room in the readonly text inputs to indicate what is the assessment's current building and room.
I want the same building and room to be selected in the drop down menus in the "New Assessment's Room" section. You can see the building is selected in the Building drop down menu but the Room is not selected in the Room drop down menu.
