Help with Dependent Select Lists

chazbedlam · #1 (**permalink**) 10-31-11, 02:12 PM

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 Code:


			
<?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 Code:


			
<?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 id="tier_two" name="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 Code:


			
<?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['drop_2'];

    echo "You selected ";

    echo $drop." & ".$tier_two;

}

/* changed 'tier_two' to 'trailer_description' */

?>

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:

TNT Enclosed Trailer Dimensions