Change Select field based on previous selection

[mike12255]

Some websites i've visited you select your country and depending on what country you select the states in the select field below change without refreashing the page. How do you got about doing this. I want to make it so that the user can select a catagory and then a subcatagory without refreashing the page. It will be going into the code posted below:

<?php  $query = "SELECT * FROM catagories ORDER BY name ASC";
  
  $uploadLocation = "/home/mikeh/public_html/uzEr Upl0ds/";?>
    <div id="main">
      <div id="caption">UPLOAD FILE</div>
      <div id= "pholder">
      <div id="icon"> </div>
      <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="fileForm" id="fileForm" enctype="multipart/form-data">
        File to upload:<center>
        <table>
        <? $res = mysql_query($query) or die (mysql_error());?>
        <tr><td><select name="catagory">
        <?php
	while ($row = mysql_fetch_array($res)){
		?>
            <option value="<?=$row['id']?>"><?=$row['name']?></option> 
	<? } ?>
         </select></td></tr>
         <tr><td> <label for="code"> Course name eg. 1001 Laws - Intro To Law</label></td></tr>
        	<tr><td><input name="code" type="text" /></td></tr>
          <tr><td><input name="upfile" type="file" size="36"></td></tr>
          <tr><td align="center"><br/><input class="text" type="submit" name="submitBtn" value="Upload"></td></tr>
        </table></center>  
      </form>
      </div>
<?php    

 

[jug]

Hi,

 

Depending how big your sub category results set is you can do it one of two ways.

 

The first is to echo out the database subcategories into JS arrays when the page is loaded. This doesnt really work well when you have loads of data as everything is loaded upfront but if you have a small set of subcategories it is a consideration and means that on any user interaction the response is pretty much instant.

 

The second way is to use AJAX. If youre not familiar with this technique look here -> http://www.w3schools.com/ajax/default.asp or alternatively if you know jquery, that allows you to use AJAX very easily. AJAX allows you to call server side scripts without a page refresh. This is obviously better as only the data youre after will be loaded, but requires a bit more patience and knowledge (worth knowing though). An AJAX response could be in a couple of formats, but if you choose XML, that would allow you to populate the second select very easily indeed.

 

Hope this helps.

 

jug