Help with Dependent Select Lists

chazbedlam · October 31, 2011

Thanks in advance for any help that you may be able to provide. I'm a graphic designer with VERY limited knowledge of php, javascript, etc. I'm trying to create a form on my company's website that will allow customers to view specifications for particular products. I'm trying to use selection boxes to narrow the customer's search, with the selection from the second box dependent on the first, and the resulting information displayed dependent on the choice from the second list.

So far, I've only been able to adapt some code I found in a tutorial to display the data in the first selection box. No matter what I've tried, I can't seem to get any information to display in the second box, let alone information that is dependent on the first selection. I am brand new to php and javascript, and I didn't even know AJAX, JSON, or JQuery even existed until only a few days ago. Below is the three php files I'm using to try and make this work. If someone could point out what is wrong with it, I would be eternally grateful.

Here is the code from db.php, the file I'm using to connect to my database:

<?php
/*changing "db_username" to "root", changing "db_password" to "xxXXXX", changing "database" to "trailers" */
mysql_connect("localhost", "root", "xxXXXX") or die(mysql_error());
mysql_select_db("trailers") or die(mysql_error());
?>

Here is the code from func.php, the file with all the functions and database queries:

<?php
//**************************************
//     Page load dropdown results - changing tier_one to tnttrailer_brand, changing two_drops to trailerquote, changing 'tier_one' to 'tnttrailer_brand'     //
//**************************************
function getTierOne()
{
$result = mysql_query("SELECT DISTINCT tnttrailer_brand FROM trailerquote") 
or die(mysql_error());

  while($tier = mysql_fetch_array( $result )) 
  
	{
	   echo '<option value="'.$tier['tnttrailer_brand'].'">'.$tier['tnttrailer_brand'].'</option>';
	}

}

//**************************************
//     First selection results - changing two_drops to trailerquote, changing tier_one to tnttrailer_brand, changing 'tier_two' to 'trailer_description',     //
//**************************************
if($_GET['func'] == "drop_1" && isset($_GET['func'])) { 
   drop_1($_GET['drop_var']); 
}

function drop_1($drop_var)
{  
    include_once('db.php');
$result = mysql_query("SELECT trailer_description FROM trailerquote WHERE tnttrailer_brand='$drop_var'") 
or die(mysql_error());

echo '<select name="tier_two" id="tier_two">
      <option value=" " disabled="disabled" selected="selected">Choose one</option>';

	   while($drop_2 = mysql_fetch_array( $result )) 
		{
		  echo '<option value="'.$drop_2['trailer_description'].'">'.$drop_2['trailer_description'].'</option>';
		}

echo '</select> ';
    echo '<input type="submit" name="submit" value="Submit" />';
}
?>

Finally, this is the code from index.php, the file with the form, javascript and the AJAX:

<?php 
  include('db.php');
  include('func.php');
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chained Select Boxes using PHP, MySQL and jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
  $('#wait_1').show();
  $('#result_1').hide();
      $.get("func.php", {
	func: "drop_1",
	drop_var: $('#drop_1').val()
      }, function(response){
        $('#result_1').fadeOut();
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
      });
    	return false;
});
});

function finishAjax(id, response) {
  $('#wait_1').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
</script>
</head>

<body>
<p>
<form action="" method="post">
  
    <select name="drop_1" id="drop_1">
    
      <option value="" selected="selected" disabled="disabled">Select a Category</option>
      
      <?php getTierOne(); ?>
    
    </select> 
    
    <span id="wait_1" style="display: none;">
    <img alt="Please Wait" src="ajax-loader.gif"/>
    </span>
    <span id="result_1" style="display: none;"></span> 
  
</form>
</p>
<p>
<?php if(isset($_POST['submit'])){
$drop = $_POST['drop_1'];
$tier_two = $_POST['trailer_description'];
echo "You selected ";
echo $drop." & ".$tier_two;
}
/* changed 'tier_two' to 'trailer_description' */
?>
</body>
</html>

Here's the page on my website. I'm using Joomla for my website, and the above php is loaded into a module at the bottom of the page:

http://www.tnttrailer.com/index.php/dimensions.html

QuickOldCar · November 1, 2011

Viewing your link, it appears you got this working.

chazbedlam · November 1, 2011

Yes. I hired it done. I had been working on this thing for a week and was at my wit's end. Turns out I had a function hidden that was causing the problem. Something I would have never caught on to.

Sign In

Help with Dependent Select Lists

Recommended Posts

chazbedlam

Link to comment

Share on other sites

QuickOldCar

Link to comment

Share on other sites

chazbedlam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information