the second dropdown list is not displaying any rooms
<p>I have two dropdown lists. The first drop down list displays the list of buildings from the database. When the user selects a building from the drop down menu, then in the second dropdown menu it should display a list of rooms which is associated with the building selected in the first drop down menu. Problem is that it does not show a list of rooms after selecting a building, it only shows the value "Please Select" and nothing else.</p>

<p>How can I get the list of rooms to appear in the dropdown menu after the user has selected a building from the first drop down menu?</p>

<p>Below is the SQL table where the building and room fields comes from (name of the table is Room):</p>

<pre><code>Building                Room

Canalside West          CW4/10
Canalside West          CW5/10
Canalside East          CE1/04
Canalside East          CE2/02
</code></pre>

<p>PHP CODE:</p>

<pre><code> $sql = "SELECT DISTINCT Building FROM Room"; 

 $sqlresult = mysql_query($sql); 

 $buildings = array(); // easier if you don't use generic names for data 

 $buildingHTML = "";  
 $buildingHTML = "&lt;form action=\"\" method=\"post\"&gt;"; 
 $buildingHTML .= '&lt;select name="buildings" id="buildingssDrop" onchange="getRooms();"&gt;'.PHP_EOL; 
 $buildingHTML .= '&lt;option value=""&gt;Please Select&lt;/option&gt;'.PHP_EOL;  

 while($sqlrow = mysql_fetch_array($sqlresult)) 
 { 
     $building = $sqlrow['Building']; 
     $buildingHTML .= "&lt;option value='".$building."'&gt;" . $building . "&lt;/option&gt;".PHP_EOL;  
  } 

  $buildingHTML .= '&lt;/select&gt;'; 
  $buildingHTML .= '&lt;/form&gt;'; 

  $roomHTML = "";  
  $roomHTML .= '&lt;select name="rooms" id="roomsDrop"&gt;'.PHP_EOL; 
  $roomHTML .= '&lt;option value=""&gt;Please Select&lt;/option&gt;'.PHP_EOL;  
  $roomHTML .= '&lt;/select&gt;'; 

  echo $buildingHTML;  
  echo $roomHTML; 
</code></pre>

<p>add a script for dynamic population.</p>

<p>JS CODE:</p>

<pre><code>function getRooms() { 
    var building = jQuery("#buildingssDrop").val(); 
    jQuery('#roomsDrop').empty(); 
    jQuery('#roomsDrop').html('&lt;option value=""&gt;Please Select&lt;/option&gt;'); 
    jQuery.ajax({ 
          type: "post", 
          url:  "rooms.php", 
          data: "building="+building, 
          success: function(response){ 
              jQuery('#roomsDrop').append(response); 
          } 
        }); 
 } 
</code></pre>

<p>Here the rooms.php is the ajax file you need to call for dynamic population of data:</p>

<p>rooms.php</p>

<pre><code>$building = isset($_POST['building']) ? $_POST['building'] : ''; 
$sql = "SELECT Room FROM Room WHERE Building ='".$building."'"; 

$sqlresult = mysql_query($sql); 


$roomHTML  = "";  

while($sqlrow = mysql_fetch_array($sqlresult)) 
{ 
     $room = $sqlrow['Room']; 
     $roomHTML .= "&lt;option value='".$room."'&gt;" . $room . "&lt;/option&gt;".PHP_EOL;  
} 


echo $roomHTML; 
</code></pre>

<p>When I do an alert (response) to test what the response shows, it shows the DOCTYPE, ',,' tags but it shows nothing in between the  tags. I hope that the pathway the to the rooms.php is correct. The create_session.php and the rooms.php are in the same folder. The url for both are here:</p>

<p>create_session.php: <a href="http://helios.hud.ac.uk/u777587/Mobile_app/create_session.php" rel="nofollow">http://helios.hud.ac.uk/u777587/Mobile_app/create_session.php</a>
rooms.php: <a href="http://helios.hud.ac.uk/u777587/Mobile_app/rooms.php" rel="nofollow">http://helios.hud.ac.uk/u777587/Mobile_app/rooms.php</a></p>

<p>In create_session.php just type in info101 in textbox and press submit then near bottom you will see the two dropdown menus for building and room</p>
