Is AJAX the solution for this?...if so, how?

[ShootingBlanks]

My need...

 

I need to have a drop-down menu that is populated from a database table.  When a user selects something, another drop-down menu is populated with values from a database table based on the previous selection.  That process continues through two more drop down menus (for a total of four) until a final set of values is displayed on-screen.

 

I am relatively competent with PHP/MySQL (have built a handful of applications), so I'm okay with creating the relational database tables and I'm familiar with PHP work.  I understand JavaScript, but am still very novice at writing it.  As far as AJAX, I've just started to read up on it (basically because of this project I need to get done).

 

My questions...

1. Is AJAX the approach I'd want to take with this?

2. Is this a relatively basic/starter AJAX project?

3. Are there any tutorials out there specifically directed towards something like I want?

4. If "no" to #3 above, can someone help get me started?

 

Thanks so much in advance for any help that can be offered!

[developerdave]

Ajax is where you would want to head, and I myself made the transfer from JavaScript coding to using jQuery because it speeds up and simplifies Ajax development no end.

 

Have a look at http://api.jquery.com/category/ajax/ you'll find that very helpful.

 

Cheers

[F00Baron]

developerdave is right. jquery is the way to go. This should get you started:

Javascript:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#First_SelectID").change(function() {
	$.ajax({
		type: "POST",
		url: "draw_second_select.php",
		data: "first_value=" + $('#First_SelectID: option:selected').val(),
		success: function(msg){
			$('#Second_SelectID').html(msg);
		}
	});
});
});
</script>

 

HTML:

 

<select name="First_Select" id="First_SelectID">
<option value="Test1">Test 1</option>
<option value="Test2">Test 2</option>
<option value="Test3">Test 3</option>
</select>
<div id="Second_SelectID"></div>

 

draw_second_select.php:

<?php
// TODO: connect to db
// TODO: select db
// TODO finish select below
$sql="SELECT * FROM ...";
$result = mysql_query($sql);
$html = '<select name="Second_Select">' . "\n";
while($row = mysql_fetch_assoc($result)) {
$html .= '<option value="' . $row['TODO']. '">' . $row['TODO']. '</option>' . "\n";
}
$html .= '</select' . "\n";
echo $html;
exit();
?>

[ShootingBlanks]

Thanks so much!  I'll look into this, and if I have more questions I'll post again.  Thank you! 

[ShootingBlanks]

F00Baron -

 

I finally got around to playing with this.  I'm not getting it working, but I'm sure I'm missing something...

 

From your js code, I changed nothing, really:

 

Javascript:

<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
   $("#First_SelectID").change(function() {
      $.ajax({
         type: "POST",
         url: "draw_second_select.php",
         data: "first_value=" + $('#First_SelectID: option:selected').val(),
         success: function(msg){
            $('#Second_SelectID').html(msg);
         }
      });
   });
});

 

This is the HTML I'm using in the body of the main page (slightly modified from what you posted):

 

HTML:

<select name="First_Select" id="First_SelectID">
<option>--SELECT AN OPTION--</option>
<?php
do { ?>
	<option value="<?php echo $row_level1['id1']?>"><?php echo $row_level1['value']?></option>
<?php
} while ($row_level1 = mysql_fetch_assoc($level1));
	mysql_data_seek($level1, 0);
	$row_level1 = mysql_fetch_assoc($level1);
?>
</select>
<div id="Second_SelectID"></div>

 

At the top of that same main page, here is the PHP I use to get the data to populate the first drop-down menu.  I know this part's working because when I load the page, the drop-down menu is properly populated with the database's "level1" table:

 

PHP code on the top of the HTML page:

<?php require_once('Connections/connection.php'); ?>
<?php
/********************************************************************/

// *** Get a list of level1 items in the database to populate the first drop-down menu with
mysql_select_db($database_db, $db);
$query_level1 = "SELECT *
			 FROM level1
			 ORDER BY value";

// *** Execute select statement to retreive categories ***
$level1 = mysql_query($query_level1, $db) or die(mssql_get_last_message());
// *** Fetch row ***
$row_level1 = mysql_fetch_assoc($level1);

/*********************************************************************/
?>

 

I basically have three database tables - level1, level2, and level3.  The level1 table has two columns - id1 (primary key) and value.  The level2 table has three columns - id2 (primary key), id1 (relating to the values in the level1 table), and value.  And the level3 table also has three columns - id3 (primary key), id2 (relating to the values in the level2 table), and value.

 

For the draw_second_select.php page, I changed it a little bit from what you wrote.  Here's what I put:

 

draw_second_select.php:

<?php require_once('Connections/connection.php'); ?>
<?php
/********************************************************************/

// *** Get a list of level2 items in the database to populate the first drop-down menu with
mysql_select_db($database_db, $db);
$query_level2 = "SELECT *
			 FROM level2
			 ORDER BY value";

// *** Execute select statement to retreive categories ***
$level2 = mysql_query($query_level2, $db) or die(mssql_get_last_message());
// *** Fetch row ***
$row_level2 = mysql_fetch_assoc($level2);

/********************************************************************/

$html = '<select name="Second_Select">' . "\n";
while($row_level2 = mysql_fetch_assoc($level2)) {
$html .= '<option value="' . $row_level2['id2']. '">' . $row_level2['value']. '</option>' . "\n";
}
$html .= '</select' . "\n";
echo $html;
exit();
?>

 

So - where I'm at now is that the first drop-down menu loads up and populates properly, but nothing happens when I select anything.  I tried changing the following line in your js code from:

 

$('#Second_SelectID').html(msg);

 

to:

 

alert( "CHANGED!" );

 

...just to see if I'd get an alert.  I still got nothing.  Where do I go from here? 

 

Thanks!!!