Dear prog wizards,

Please help as I am noob at this. I got source code from other website in which I made small changes to cater my need. I have created a database called 'a_database' and table called 'property' using XAMPP 1.7.7 . The columns are 'id', 'Type', 'Price' and 'Location'.

My first dropdown box filters Type
My second dropdown box filters Location

For example : Type is House and Factory
Location is Bangkok and Singapore

When I select House, I will get the desired table.

Then, I select Bangkok and expect to filter House which are located in Bangkok. Unfortunately, this did not happen. Can someone please help me on this ?

My code :

Code:
<html> <head> 
<script type="text/javascript"> 

function showtype(str){
   var ajaxRequest;  // The variable that makes <strong class="highlight">Ajax</strong> possible!
   if (str=="") {   
      document.getElementById("txtHint").innerHTML="";   
      return;   
   }     
   try{
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e){
      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
   // Create a function that will receive data sent from the server
   ajaxRequest.onreadystatechange = function(){
      if(ajaxRequest.readyState == 4){
         var ajaxDisplay = document.getElementById('txtHint');
         ajaxDisplay.innerHTML = ajaxRequest.responseText;
      }
   }
   ajaxRequest.open("GET","gettype.php?q="+str,true); 
   ajaxRequest.send(null);    
}
function showlocation(str){
   var ajaxRequest;  // The variable that makes <strong class="highlight">Ajax</strong> possible!
   if (str=="") {   
      document.getElementById("txtHint").innerHTML="";   
      return;   
   }     
   try{
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e){
      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
   // Create a function that will receive data sent from the server
   ajaxRequest.onreadystatechange = function(){
      if(ajaxRequest.readyState == 4){
         var ajaxDisplay = document.getElementById('txtHint');
         ajaxDisplay.innerHTML = ajaxRequest.responseText;
      }
   }
   ajaxRequest.open("GET","getlocation.php?q="+str,true); 
   ajaxRequest.send(null);    
}
//-->   
</script> 
</head> 
<body>  
<form> 
<select name="type" onchange="showtype(this.value)"> 
<option value="">Select property type:</option> 
<option value="1">All</option> 
<option value="2">factory</option> 
<option value="3">house</option> 
</select><br />
<select name="Location" onchange="showlocation(this.value)"> 
<option value="">Select property location:</option> 
<option value="1">All</option> 
<option value="2">bangkok</option> 
<option value="3">Patpong</option> 
</select> </form> <br /> 
<div id="txtHint"><b>Person info will be listed here.</b></div>  </body> </html>
My getlocation.php

Code:
<?php 
   $q=$_GET["q"]; 
   // check for your q values, 1 = all, 2 = bangkok, 3 = Patpong
      $con = mysql_connect('localhost', 'root', ''); 
   if (!$con) { 
      die('Could not connect: ' . mysql_error()); 
   } 
   mysql_select_db("a_database", $con); 
   // based on the value passed in we may have to change query, if all run this...
   if ($q == 1) {
      $sql="SELECT * FROM property"; 
   } else if($q == 2){
      $sql="SELECT * FROM property WHERE Location = 'bangkok'"; 
   } else if($q == 3){
      $sql="SELECT * FROM property WHERE Location = 'Patpong'";       
   }
   $result = mysql_query($sql); 
   echo "<table border='1'> <tr> <th>Type</th> <th>Price</th> <th>Location</th> </tr>"; 
   while($row = mysql_fetch_array($result)) { 
      echo "<tr>"; 
      echo "<td>" . $row['Type'] . "</td>"; 
      echo "<td>" . $row['Price'] . "</td>"; 
      echo "<td>" . $row['Location'] . "</td>"; 
      echo "</tr>"; } 
      echo "</table>"; 
      mysql_close($con); 
   ?>
My gettype.php

Code:
<?php 
   $q=$_GET["q"]; 
   $con = mysql_connect('localhost', 'root', ''); 
   if (!$con) { 
      die('Could not connect: ' . mysql_error()); 
   } 

   mysql_select_db("a_database", $con); 

   

        if ($q == 1) {
      $sql="SELECT * FROM property"; 
   } else if($q == 2){
      $sql="SELECT * FROM property WHERE Type = 'factory'"; 
   } else if($q == 3){
      $sql="SELECT * FROM property WHERE Type = 'house'";       
   }



   $result = mysql_query($sql); 
   echo "<table border='1'> <tr>  <th>Type</th> <th>Price</th> <th>Location</th>  </tr>";
   while($row = mysql_fetch_array($result)) { 
      echo "<tr>"; 
      echo "<td>" . $row['Type'] . "</td>"; 
      echo "<td>" . $row['Price'] . "</td>"; 
      echo "<td>" . $row['Location'] . "</td>"; 
      echo "</tr>"; } 
      echo "</table>"; 
      mysql_close($con); 
   ?>