Dynamic Jump Menus several select fields

I have a search or browse form for selecting and displaying country, state and category. In other words a form with 3 select fileds.

It’s getting the results from a database.

It works with a standard form and submit button.

I’m looking for a “JUMP MENU” solution, so that when you select each select field it jumps/submits and the two other fields displays the new results from that.

So if the start country was USA and I wanted to select CANADA, the states in the state select field would change the Canada regions without having to submit a submit button…etc Also the same thing with the CATEGORY select field.

Below is the form I currently have that just uses a form and a submit button.

I wonder if anyone knows how to change this into a jump menu solution instead.

Thanks

<form method=“GET” action=“browse.php”>

FIRST SELECT MENU

<strong>Country</strong>

<select name=“country_number”>

 

<?php


//Connect to mysql server
 $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
 if(!$link) {
  die('Failed to connect to server: ' . mysql_error());
 }
 
 //Select database
 $db = mysql_select_db(DB_DATABASE);
 if(!$db) {
  die("Unable to select database");
 }


// Get Category Name and Number **********************************


$country_number = $_GET['country_number'];

$QUERY999 = mysql_query("SELECT * FROM countries WHERE country_number='$country_number'");
$ROWS999 = mysql_num_rows($QUERY999);

$country_name = mysql_result($QUERY999,$J999,"country_name");


//******* FIRST OPTION IS TO RETURN THE SELECTED VALUE ***********

echo "<OPTION VALUE='$country_number'>";

echo $country_name;

echo "</OPTION>";

//******* SECOND OPTION IS AN EMPTY SPACE ***********

echo "<OPTION VALUE='$country_number'>-----</OPTION>";


//******* THIRD OPTION DISPLAYS COUNTRIES FROM DATABASE ***********

$QUERY77 = @mysql_query("SELECT * FROM countries WHERE country_status='ON' ORDER BY country_rank");
$NUMROWS77 = mysql_num_rows($QUERY77);

if ($NUMROWS77) {
$I77 = 0;

while ($I77 < $NUMROWS77) {
$country_id = mysql_result($QUERY77,$I77,"country_id");
$country_name = mysql_result($QUERY77,$I77,"country_name");
$country_number = mysql_result($QUERY77,$I77,"country_number");
$country_rank = mysql_result($QUERY77,$I77,"country_rank");
         

// DISPLAY COUNTRIES**********************************

echo "<OPTION VALUE='$country_number'>$country_name</OPTION>"; 

$I77++;

}
}

?>


</select>


SECOND SELECT MENU

<strong>State/Region</strong>

<select name=“state_number”>


    
<?php

//Connect to mysql server
 $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
 if(!$link) {
  die('Failed to connect to server: ' . mysql_error());
 }
 
 //Select database
 $db = mysql_select_db(DB_DATABASE);
 if(!$db) {
  die("Unable to select database");
 }

// Get State Name and Number **********************************

$state_number = $_GET['state_number'];
$country_number = $_GET['country_number'];

$QUERY33 = mysql_query("SELECT * FROM states WHERE state_number='$state_number' AND country_number='$country_number'");
$ROWS33 = mysql_num_rows($QUERY33);

$state_name = mysql_result($QUERY33,$J33,"state_name");


//******* FIRST OPTION IS TO RETURN THE SELECTED VALUE ***********

if (($state_name == '') OR ($state_number == '')) {
echo "<OPTION>";
echo "Choose State/Region";
echo "</OPTION>";

} else {

echo "<OPTION VALUE='$state_number'>";

echo $state_name;


//DISPLAY # IN THE DATABASE
$cat_number = $_GET['cat_number'];

$QUERY44 = mysql_query("SELECT * FROM members WHERE state_number='$state_number' AND cat_number='$cat_number' AND country_number='$country_number'");
$NUMROWS44 = mysql_num_rows($QUERY44);


echo " ($NUMROWS44)";

echo "</OPTION>";

}

//******* SECOND OPTION IS AN EMPTY SPACE ***********

echo "<OPTION VALUE='$state_number'>-----</OPTION>";


//******* THIRD OPTION IS TO RETURN ALL ROWS ***********

$QUERY = mysql_query("SELECT * FROM states WHERE country_number='$country_number'");
$NUMROWS = mysql_num_rows($QUERY);

if ($NUMROWS){
$I = 0;

while ($I < $NUMROWS) {
$state_id = mysql_result($QUERY,$I,"state_id");
$state_name = mysql_result($QUERY,$I,"state_name");
$state_number = mysql_result($QUERY,$I,"state_number");
$state_rank = mysql_result($QUERY,$I,"state_rank");
         
// DISPLAY STATES AND THE NUMBER PER STATE **********************************

echo "<OPTION VALUE='$state_number'>";

echo $state_name;

$cat_number = $_GET['cat_number'];

$QUERY8 = mysql_query("SELECT * FROM members WHERE state_number='$state_number' AND cat_number='$cat_number' AND country_number='$country_number'");
$NUMROWS8 = mysql_num_rows($QUERY8);

echo " ($NUMROWS8)";

echo "</OPTION>"; 


$I++;

}

}
?>



THIRD SELECT MENU

<strong>Category</strong>

<select name=“cat_number”>


    
<?php

//Connect to mysql server
 $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
 if(!$link) {
  die('Failed to connect to server: ' . mysql_error());
 }
 
 //Select database
 $db = mysql_select_db(DB_DATABASE);
 if(!$db) {
  die("Unable to select database");
 }


// Get Category Name and Number **********************************

$state_number = $_GET['state_number'];
$country_number = $_GET['country_number'];

$QUERY333 = mysql_query("SELECT * FROM categories WHERE cat_number='$cat_number'");
$ROWS333 = mysql_num_rows($QUERY333);

$cat_name = mysql_result($QUERY333,$J333,"cat_name");


//******* FIRST OPTION IS TO RETURN THE SELECTED VALUE ***********

echo "<OPTION VALUE='$cat_number'>";
echo $cat_name;

echo "</OPTION>";

//******* SECOND OPTION IS AN EMPTY SPACE ***********

echo "<OPTION VALUE='$cat_number'>-----</OPTION>";


//******* THIRD OPTION RETURN ALL ROWS ***********

$QUERY4 = @mysql_query("SELECT * FROM categories WHERE cat_status='ON' ORDER BY cat_rank");
$NUMROWS4 = mysql_num_rows($QUERY4);

if ($NUMROWS4) {
$I4 = 0;

while ($I4 < $NUMROWS4) {
$cat_id = mysql_result($QUERY4,$I4,"cat_id");
$cat_name = mysql_result($QUERY4,$I4,"cat_name");
$cat_number = mysql_result($QUERY4,$I4,"cat_number");
$cat_rank = mysql_result($QUERY4,$I4,"cat_rank");
         

// DISPLAY CATEGORIES **********************************

echo "<OPTION VALUE='$cat_number'>$cat_name</OPTION>"; 

$I4++;

}
}

?>


</select>

<br />
<input type=“image” src=“images/button_form_browse.png” name=“Submit” value=“Browse” />

  &lt;/form&gt;

Someone answered to this post (member “Kammel”), but it looks like the reply is either removed or something.

The reply was the following and I don’t really understand it so I wonder if someone has an example for it?

"[COLOR=“Blue”]If you want to populate the States select list without a page refresh/submit you need to use AJAX.

Put an onchange event handler on the Country select list which sends an ajax request with the chosen country to a php script on the server. The php script retrieves the list of states from a database and puts them into a string with a unique character(s) separating each state. This string is then returned to your ajax function.

The ajax function splits the returned string using the unique character(s) as the delimiter and puts the states into a javascript array. Use this array of states to then create the options dynamically for the States select list[/COLOR].
"

What Kammel says is you can’t do what you asked with PHP, you muwst use javascript or ajax. Check: http://javascript.about.com/library/bl3drop.htm

I understand the concept, I just don’t really know how to do it with a database and javascript
Just wondered if someone had an example based on the info from my database.