chazbedlam Posted October 31, 2011 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/250163-help-with-dependent-select-lists/ Share on other sites More sharing options...
QuickOldCar Posted November 1, 2011 Share Posted November 1, 2011 Viewing your link, it appears you got this working. Quote Link to comment https://forums.phpfreaks.com/topic/250163-help-with-dependent-select-lists/#findComment-1283844 Share on other sites More sharing options...
chazbedlam Posted November 1, 2011 Author Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/250163-help-with-dependent-select-lists/#findComment-1283988 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.