title: How to fill dropdown box dynamically from database without submitting form and page refresh using AJAX in PHP?
body: <p>I have a PHP file in which there is a form and which has two Select drop down box.
  The first select box is filled with some value.</p>
  
  <p>The Secont select box is empty.</p>
  
  <p>As per requirement if some value is selected from first drop down box the second box should be get filled with some values from database.</p>
  
  <p>I want to achive this using AJAX. </p>
  
  <p>I got a code from <a href="http://www.w3school.com" rel="nofollow">http://www.w3school.com</a> site. But in following that there is only one dropdown box and on onchange event the related values of selected value are showed in table format.I can replace that html code for table in the code with my second select box. 
  But as per requirement I want to show second select dropdown box empty before selection which should get filled as per the selection in first select box dynamically and from database.
  So friends please tell me how to solve this problem.
  If you dont understand the following code because of formatting; then the same code that I got from <a href="http://www.w3school.com" rel="nofollow">http://www.w3school.com</a> site is on the following link on same site.</p>
  
  <p><a href="http://www.w3schools.com/php/php_ajax_database.asp" rel="nofollow">http://www.w3schools.com/php/php_ajax_database.asp</a></p>
  
  <p>This is the HTML page with ajax code </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  function showUser(str)
  {
   if (str=="")
   {
    document.getElementById("txtHint").innerHTML="";
    return;
   } 
   if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
   }
   else
   {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
      {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      }
    }
  xmlhttp.open("GET","getuser.php?q="+str,true);
  xmlhttp.send();
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form&gt;
  &lt;select name="users" onchange="showUser(this.value)"&gt;
  &lt;option value=""&gt;Select a person:&lt;/option&gt;
  &lt;option value="1"&gt;Peter Griffin&lt;/option&gt;
  &lt;option value="2"&gt;Lois Griffin&lt;/option&gt;
  &lt;option value="3"&gt;Glenn Quagmire&lt;/option&gt;
  &lt;option value="4"&gt;Joseph Swanson&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  &lt;br /&gt;
  &lt;div id="txtHint"&gt;&lt;b&gt;Person info will be listed here.&lt;/b&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the PHP file which is located on server and get called using AJAX and fetches the values from database</p>
  
  <pre><code>&lt;?php
  $q=$_GET["q"];
  $con = mysql_connect('localhost', 'peter', 'abc123');
  if (!$con)
  {
  die('Could not connect: ' . mysql_error());
   }
   mysql_select_db("ajax_demo", $con);
   $sql="SELECT * FROM user WHERE id = '".$q."'";
   $result = mysql_query($sql);
   echo "&lt;table border='1'&gt;
   &lt;tr&gt;
   &lt;th&gt;Firstname&lt;/th&gt;
   &lt;th&gt;Lastname&lt;/th&gt;
  &lt;th&gt;Age&lt;/th&gt;
  &lt;th&gt;Hometown&lt;/th&gt;
  &lt;th&gt;Job&lt;/th&gt;
  &lt;/tr&gt;";
  while($row = mysql_fetch_array($result))
    {
    echo "&lt;tr&gt;";
    echo "&lt;td&gt;" . $row['FirstName'] . "&lt;/td&gt;";
    echo "&lt;td&gt;" . $row['LastName'] . "&lt;/td&gt;";
    echo "&lt;td&gt;" . $row['Age'] . "&lt;/td&gt;";
    echo "&lt;td&gt;" . $row['Hometown'] . "&lt;/td&gt;";
    echo "&lt;td&gt;" . $row['Job'] . "&lt;/td&gt;";
    echo "&lt;/tr&gt;";
    }
  echo "&lt;/table&gt;";
  
  mysql_close($con);
  ?&gt;
  </code></pre>
  
  <p>Please Guide me friends.
  Thank You!</p>