Codeman0013 Posted September 12, 2006 Share Posted September 12, 2006 Hello, i'm working on a website and i have 4 dropdown's that are on a page and i want to make them dependent. Right now i have them set to pull from the database but i want it set to based on what they select on number 1 it populates number 2 and number 2 populates 3 and 3 does 4 and so on. Can someone take a look at my code and help me to achieve this as i have never done it before and would appreciate any help at all.. <?php require_once('Connections/conn_dj.php'); ?><?phpif (!function_exists("GetSQLValueString")) {function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") { $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue; $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue); switch ($theType) { case "text": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "long": case "int": $theValue = ($theValue != "") ? intval($theValue) : "NULL"; break; case "double": $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL"; break; case "date": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "defined": $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue; break; } return $theValue;}}mysql_select_db($database_conn_dj, $conn_dj);$query_rs_industry = "SELECT * FROM tbl_industry ORDER BY industry_name ASC";$rs_industry = mysql_query($query_rs_industry, $conn_dj) or die(mysql_error());$row_rs_industry = mysql_fetch_assoc($rs_industry);$totalRows_rs_industry = mysql_num_rows($rs_industry);mysql_select_db($database_conn_dj, $conn_dj);$query_rs_productcategory = "SELECT * FROM tbl_productcat ORDER BY tbl_productcat.productCat_name";$rs_productcategory = mysql_query($query_rs_productcategory, $conn_dj) or die(mysql_error());$row_rs_productcategory = mysql_fetch_assoc($rs_productcategory);$totalRows_rs_productcategory = mysql_num_rows($rs_productcategory);mysql_select_db($database_conn_dj, $conn_dj);$query_rs_product = "SELECT * FROM tbl_products ORDER BY tbl_products.products_name";$rs_product = mysql_query($query_rs_product, $conn_dj) or die(mysql_error());$row_rs_product = mysql_fetch_assoc($rs_product);$totalRows_rs_product = mysql_num_rows($rs_product);mysql_select_db($database_conn_dj, $conn_dj);$query_rs_outsidena = "SELECT * FROM intl_countries ORDER BY intl_countries.name";$rs_outsidena = mysql_query($query_rs_outsidena, $conn_dj) or die(mysql_error());$row_rs_outsidena = mysql_fetch_assoc($rs_outsidena);$totalRows_rs_outsidena = mysql_num_rows($rs_outsidena);mysql_select_db($database_conn_dj, $conn_dj);$query_rs_state = "SELECT * FROM tbl_states ORDER BY tbl_states.`state`";$rs_state = mysql_query($query_rs_state, $conn_dj) or die(mysql_error());$row_rs_state = mysql_fetch_assoc($rs_state);$totalRows_rs_state = mysql_num_rows($rs_state);?><!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><title>DICKEY-john Corporation | Distributors</title><link href="_lib/sub.css" rel="stylesheet" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="keywords" content="Distributor, Sales, Purchase, U.S., International" /><meta name="description" content="Enter your zip or postal code to find the DICKEY-john distributor nearest you." /></head><body><div id="black"> </div><div id="siteContainer"> <?php include("_inc/topNav.inc"); ?> <div id="headerContainer">Distributors</div> <div class="divContainer"><div class="horizDiv"></div><img src="/_img/divEnd.png" alt="div" height="16" width="4" align="right" /></div> <div id="contentContainer"> <div id="fullContainer"> <div id="stretchCrumbs"> <a href="/index.php">Home</a> » <a class="high" href="/distributors/">Distributors</a> </div> <h1>Distributors</h1> <p>Search for DICKEY-john distributers by specifying any combonation of the<br /> following classifications: industry, product category, product, and state.</p> <br /> <br /> <h2>North America</h2> <table class="setTbl listTbl" width="90%" cellpadding="0" cellspacing="0" border="0"> <tr><td>Industry:</td><td> <select name="industry" id="center" onchange="java script:document.centerform.submit()"> <option value="">Select an Industry...</option> <?php do { ?> <option value="<?php echo $row_rs_industry['industry_name']; ?>"><?php echo $row_rs_industry['industry_name']; ?></option> <?php } while ($row_rs_industry = mysql_fetch_assoc($rs_industry)); ?></td></tr> </select> <tr><td width="125">Product Category: </td> <td> <select name="prodcat" id="center" onchange="java script:document.centerform.submit()"> <option value="">Select a product category...</option> <?php do { ?> <option value="<?php echo $row_rs_productcategory['productCat_name']; ?>"><?php echo $row_rs_productcategory['productCat_name']; ?></option> <?php } while ($row_rs_productcategory = mysql_fetch_assoc($rs_productcategory)); ?></td></tr> </select> <tr> <td>Product:</td><td> <select name="prod" id="center" onchange="java script:document.centerform.submit()"> <option value="">Select a product...</option> <?php do { ?> <option value="<?php echo $row_rs_product['products_name']; ?>"><?php echo $row_rs_product['products_name']; ?></option> <?php } while ($row_rs_product = mysql_fetch_assoc($rs_product)); ?> </td></tr> </select> <td>State:</td> <td> <select name="state" id="center" onchange="java script:document.centerform.submit()"> <option value="">Select a state...</option> <?php do { ?> <option value="<?php echo $row_rs_state['state']; ?>"><?php echo $row_rs_state['state']; ?></option> <?php } while ($row_rs_state = mysql_fetch_assoc($rs_state)); ?> </td></tr> </select></td> </tr> <tr><td> </td><td><input class="PythonButton" type="submit" value="Find" name="{Button_Name}"></td></tr> </table> </form> <br /> <h2>Outside North America </h2> <table class="setTbl listTbl" width="90%" cellpadding="0" cellspacing="0" border="0"> <tr><td> <select name="outna" id="center" onchange="java script:document.centerform.submit()"> <option value="">Select a country...</option> <?php do { ?> <option value="<?php echo $row_rs_ousidena['name']; ?>"><?php echo $row_rs_outsidena['name']; ?></option> <?php } while ($row_rs_outsidena = mysql_fetch_assoc($rs_outsidena)); ?> </td></tr> </select></td> </tr></td></tr> </table> </form> </div> </div><?php include("_inc/footer.inc"); ?></body></html><?phpmysql_free_result($rs_industry);mysql_free_result($rs_productcategory);mysql_free_result($rs_product);mysql_free_result($rs_outsidena);mysql_free_result($rs_state);?> Link to comment Share on other sites More sharing options...
justsomeguy Posted September 12, 2006 Share Posted September 12, 2006 If you want this to be purely client-side (instead of resubmitting the page whenever they change a dropdown), you will need to write out all of the javascript code that will change the dropdowns. You'll probably need one javascript function for each of the three dropdowns that changes another one, and each javascript function will need to read which value you chose, and populate the next list with options. You can search for the code on how to add and remove options from a dropdown, that is pretty common. But you will need to write out all of your database data in the javascript functions, inside a javascript array or something so that the function can go through the array and add the various items to the list.So, in other words, you need to use PHP to write out Javascript code that will clear out the dropdown and add the new items. The difficult part will be structuring your data in the Javascript functions so that it works like you want. While developing, take a look at your Javascript code and use a Javascript console like Opera or Firefox has to track down Javascript errors. Link to comment Share on other sites More sharing options...
Codeman0013 Posted September 12, 2006 Author Share Posted September 12, 2006 If you want this to be purely client-side (instead of resubmitting the page whenever they change a dropdown), you will need to write out all of the javascript code that will change the dropdowns. You'll probably need one javascript function for each of the three dropdowns that changes another one, and each javascript function will need to read which value you chose, and populate the next list with options. You can search for the code on how to add and remove options from a dropdown, that is pretty common. But you will need to write out all of your database data in the javascript functions, inside a javascript array or something so that the function can go through the array and add the various items to the list.So, in other words, you need to use PHP to write out Javascript code that will clear out the dropdown and add the new items. The difficult part will be structuring your data in the Javascript functions so that it works like you want. While developing, take a look at your Javascript code and use a Javascript console like Opera or Firefox has to track down Javascript errors.wow this is way over my head nice of the freaking people to assign this to an intern who has no idea how to do it would you have anywhere i could look to learn how to do this? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 12, 2006 Share Posted September 12, 2006 Well, there are a lot of pieces to this. The first one is removing all the options from a select list. Whenever you make a change, you will want to remove all the options, then add new ones. This is how you remove options:http://www.w3schools.com/htmldom/met_select_remove.aspYou will use the size property of the select list to remove all of them: for (i = document.getElementById("dropdown1").size - 1; i >= 0; i--) document.getElementById("dropdown1").remove(i); That should remove everything. The next thing to do is add all the new options. Here is a page about adding and removing options:http://www.mredkj.com/tutorials/tutorial005.htmlThis is the code they use: var elOptNew = document.createElement('option'); elOptNew.text = 'Insert' + num; elOptNew.value = 'insert' + num; var elOptOld = elSel.options[elSel.selectedIndex]; try { elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE } catch(ex) { elSel.add(elOptNew, elSel.selectedIndex); // IE only } Once you can remove and add the options, the next part is figuring out which options you need to add. So, you need to check what the value of the previous dropdown list is, and use an IF statement to add the appropriate new options. This is where the PHP will come into play, you will write out each IF statement with PHP to add the appropriate options based on the value that was selected in the other list. Link to comment Share on other sites More sharing options...
Codeman0013 Posted September 13, 2006 Author Share Posted September 13, 2006 Well, there are a lot of pieces to this. The first one is removing all the options from a select list. Whenever you make a change, you will want to remove all the options, then add new ones. This is how you remove options:http://www.w3schools.com/htmldom/met_select_remove.aspYou will use the size property of the select list to remove all of them:for (i = document.getElementById("dropdown1").size - 1; i >= 0; i--) document.getElementById("dropdown1").remove(i); That should remove everything. The next thing to do is add all the new options. Here is a page about adding and removing options:http://www.mredkj.com/tutorials/tutorial005.htmlThis is the code they use: var elOptNew = document.createElement('option'); elOptNew.text = 'Insert' + num; elOptNew.value = 'insert' + num; var elOptOld = elSel.options[elSel.selectedIndex]; try { elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE } catch(ex) { elSel.add(elOptNew, elSel.selectedIndex); // IE only } Once you can remove and add the options, the next part is figuring out which options you need to add. So, you need to check what the value of the previous dropdown list is, and use an IF statement to add the appropriate new options. This is where the PHP will come into play, you will write out each IF statement with PHP to add the appropriate options based on the value that was selected in the other list. wow i'm totally lost and this is way over my head still thanks for trying to help i'm totally lost and they just keep getting on me to do this thats y i'm not a webprogrammer i dont have a clue how to do this... Link to comment Share on other sites More sharing options...
reportingsjr Posted September 13, 2006 Share Posted September 13, 2006 tell yuor boss you cant do it because you dont know how to, or ask a programmer at your work place to do it. It probably wouldnt take them too long. Link to comment Share on other sites More sharing options...
Codeman0013 Posted September 13, 2006 Author Share Posted September 13, 2006 tell yuor boss you cant do it because you dont know how to, or ask a programmer at your work place to do it. It probably wouldnt take them too long.that wont work the boss is the only programmer here and he wont do it or help me do it Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 13, 2006 Share Posted September 13, 2006 Check out this linkClick Me!Thats a "tutorial"Its not really a tutorial, they give you the code in a zip file, but I think thats the sort of thing you want. Link to comment Share on other sites More sharing options...
Codeman0013 Posted September 13, 2006 Author Share Posted September 13, 2006 Check out this linkClick Me!Thats a "tutorial"Its not really a tutorial, they give you the code in a zip file, but I think thats the sort of thing you want.Thank you chronthenoob that helps me a lot i have it hardcoded now but is it possible to make this into a database driven list? Link to comment Share on other sites More sharing options...
reportingsjr Posted September 13, 2006 Share Posted September 13, 2006 yep, just do a query to the database to pull the rows where x column = whatever selected in the list.Also, why will the boss not do this? That is just ignorant. Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 14, 2006 Share Posted September 14, 2006 Thank you chronthenoob that helps me a lot i have it hardcoded now but is it possible to make this into a database driven list?It is very much possible to make them database driven. I'm sure you can just add some database interaction instead it being hardcoded. You posted in the php forum so im assuming you are using php and mysql for the database. I can help you out if you are having problems with the queries. It shouldnt be too difficult :)Good luck! Link to comment Share on other sites More sharing options...
Codeman0013 Posted September 14, 2006 Author Share Posted September 14, 2006 It is very much possible to make them database driven. I'm sure you can just add some database interaction instead it being hardcoded. You posted in the php forum so im assuming you are using php and mysql for the database. I can help you out if you are having problems with the queries. It shouldnt be too difficult :)Good luck!Yes you are exactly right in all of your assumptions so far i have been making it hardcoded but it needs to be driven based on the database could you help me do this? I have no idea where to start i have 2 seperate pages one that pulls all the items and one thats hard coded just what should be in each one can you help me take the ones i just made using your code and have them pull based on the database please Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 14, 2006 Share Posted September 14, 2006 How many levels are there going to be? 3 levels?Also, do you have the database created already? Link to comment Share on other sites More sharing options...
Codeman0013 Posted September 14, 2006 Author Share Posted September 14, 2006 How many levels are there going to be? 3 levels?Also, do you have the database created already?yes the database is created and there is going to be approximately 4 dropdowns one for the industry which is populated at the beginning and after they select the industry it moves to the product category which then will populate the product menu which then populates the state menu(will have all states no matter what) and then the user will click the find button and it will then list all the matching results... Link to comment Share on other sites More sharing options...
aspnetguy Posted September 14, 2006 Share Posted September 14, 2006 if you are going to populate with all states regardless of what options are selected perhaps you should populate this fromt he beginning as well adn just disable it until they get to that step. Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 14, 2006 Share Posted September 14, 2006 It'd probably be best to put the state first, so you don't have to worry about using javascript to disable it, since its a static value. Link to comment Share on other sites More sharing options...
Codeman0013 Posted September 14, 2006 Author Share Posted September 14, 2006 It'd probably be best to put the state first, so you don't have to worry about using javascript to disable it, since its a static value.well right now its the last thing but its static the boss wnats it last for some reason dont ask me man but i'm just going with what he said Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 14, 2006 Share Posted September 14, 2006 Ok try something like this.You'll obviously change the names to what you have in your database and add an action to the form. You can probably find a simple javascript to submit each feild automatically when the user selects something and so it remembers what they selected in each dropdown.But here is the general logic I could come up with. It should be a decent start if you know php :)P.S. I havnt tested it yet. <html><body><form><select name="industry"><option value="">---Industry---</option><?PHP $query="SELECT * from dropdown1"; $results = mysql_query($query); while ($e=mysql_fetch_array($results)) { echo "<option value='".$e[one_value]."'>".$e[one_value]."</option>"; }?></select><select name="product_cat"<?PHPif ($_REQUEST['industry'] != "") {echo ">";}else { echo "disabled>";} $query="SELECT two_value from dropdown2 where dropdown_one_id=$_REQUEST[dropdown1]"; $results = mysql_query($query); while ($e=mysql_fetch_array($results)) { echo "option value='".$e[two_value]."'>".$e[two_value]."</option>"; }?></form></body></html> Link to comment Share on other sites More sharing options...
Codeman0013 Posted September 14, 2006 Author Share Posted September 14, 2006 Ok try something like this.You'll obviously change the names to what you have in your database and add an action to the form. You can probably find a simple javascript to submit each feild automatically when the user selects something and so it remembers what they selected in each dropdown.But here is the general logic I could come up with. It should be a decent start if you know php :)P.S. I havnt tested it yet.<html><body><form><select name="industry"><option value="">---Industry---</option><?PHP $query="SELECT * from dropdown1"; $results = mysql_query($query); while ($e=mysql_fetch_array($results)) { echo "<option value='".$e[one_value]."'>".$e[one_value]."</option>"; }?></select><select name="product_cat"<?PHPif ($_REQUEST['industry'] != "") {echo ">";}else { echo "disabled>";} $query="SELECT two_value from dropdown2 where dropdown_one_id=$_REQUEST[dropdown1]"; $results = mysql_query($query); while ($e=mysql_fetch_array($results)) { echo "option value='".$e[two_value]."'>".$e[two_value]."</option>"; }?></form></body></html> Ok i'm having problems now when i put my include in for the navigation it kills my js and it does not work but as soon as i take it off it works again i'm going to attach both for you to look at maybe someone can figure out what the heck is going on..<!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><title>DICKEY-john Corporation | Distributors</title><link href="_lib/sub.css" rel="stylesheet" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="keywords" content="Distributor, Sales, Purchase, U.S., International" /><meta name="description" content="Enter your zip or postal code to find the DICKEY-john distributor nearest you." /><script language="javascript" src="chainedselects.js"></script><script language="javascript" src="exampleconfig.js"></script></head><body onload="initListGroup('vehicles', document.forms[0].make, document.forms[0].type, document.forms[0].model)"><div id="black"> </div><div id="siteContainer"> <?php include("_inc/topNav.inc"); ?><div id="headerContainer">Distributors</div> <div class="divContainer"><div class="horizDiv"></div><img src="/_img/divEnd.png" alt="div" height="16" width="4" align="right" /></div> <div id="contentContainer"> <div id="fullContainer"> <div id="stretchCrumbs"> <a href="/index.php">Home</a> » <a class="high" href="/distributors/">Distributors</a> </div> <h1>Distributors</h1> <p>Search for DICKEY-john distributers by specifying any combonation of the<br /> following classifications: industry, product category, product, and state.</p> <br /> <h2>North America</h2><table class="setTbl listTbl" width="90%" cellpadding="0" cellspacing="0" border="0"><tr><td><form><table align="center"><tr><td>Industry:</td><td><select name="make"></select></td></tr><tr><td>Product Category: </td><td><select name="type"></select></td></tr><tr><td>Product:</td><td><select name="model"></select></td></tr><td><input type="button" value="Reset" onclick="resetListGroup('vehicles')"></tr></table></form></body></html> here is the include file.. <script> function clearText(thefield){ if (thefield.defaultValue==thefield.value) thefield.value = "" } </script><div id="menuContainer"> <form id="search" method="GET" action="/search/index.php"> <input id="searchBox" type="text" name="zoom_query" value="Search" onFocus="clearText(this)"/> <input type="hidden" name="zoom_and" value="1" /> <input id="searchSubmit" type="image" src="/_img/arrow_search.jpg" alt="site search arrow" /> </form> <div id="topTidbits"><!--ZOOMSTOP--> <a href="/index.php">Home</a> | <a href="/aboutus/">About Us</a> | <a href="/pressroom/">Pressroom</a> | <a href="/shows/">Trade Shows</a> | <a href="/employment/">Employment</a> | <!--<a href="/pressroom/catalogs/">Catalogs</a> |--> <a href="/sitemap/">Site Map</a><!--ZOOMRESTART--></div> <table id="navTbl" border="0" cellpadding="0" cellspacing="0"> <tr><!--ZOOMSTOP--> <td class="nav"><a href="/products/">PRODUCTS</a></td> <td class="nav"><a href="/distributors/">DISTRIBUTORS</a></td> <td class="nav"><a href="/full-circle-manufacturing/">FULL CIRCLE MANUFACTURING</a></td> <td class="nav navEnd"><a href="/contact/">CONTACT US</a></td> <!--ZOOMRESTART--> </tr> </table> </div> Link to comment Share on other sites More sharing options...
justsomeguy Posted September 14, 2006 Share Posted September 14, 2006 So you include the topNav.inc, and then the code in chainedselects or exampleconfig stops working? It looks like some divs are not being closed, so if the javascript is trying to access certain divs, it might be confused as to where they end. It looks like the siteContainer, contentContainer, and fullContainer divs are not being closed. Link to comment Share on other sites More sharing options...
Codeman0013 Posted September 15, 2006 Author Share Posted September 15, 2006 So you include the topNav.inc, and then the code in chainedselects or exampleconfig stops working? It looks like some divs are not being closed, so if the javascript is trying to access certain divs, it might be confused as to where they end. It looks like the siteContainer, contentContainer, and fullContainer divs are not being closed.I figured it out but now i have to get the database working thats going to be the hard part. The js works but nothign else is up and going yet... Link to comment Share on other sites More sharing options...
Codeman0013 Posted September 15, 2006 Author Share Posted September 15, 2006 <form id="search" method="GET" action="/search/index.php"> <input id="searchBox" type="text" name="zoom_query" value="Search" onFocus="clearText(this)"/> <input type="hidden" name="zoom_and" value="1" /> <input id="searchSubmit" type="image" src="/_img/arrow_search.jpg" alt="site search arrow" /> </form> Something in that line is what is causing my problem when i remove it from the page it works again! Link to comment Share on other sites More sharing options...
justsomeguy Posted September 18, 2006 Share Posted September 18, 2006 There's nothing wrong with that code itself. With all of the IDs and the hidden element, it looks like javascript is accessing the elements, so there's probably some problem where the javascript either gets an unexpected value, or is missing a value. But that code is syntactically correct. Link to comment Share on other sites More sharing options...
Codeman0013 Posted September 18, 2006 Author Share Posted September 18, 2006 There's nothing wrong with that code itself. With all of the IDs and the hidden element, it looks like javascript is accessing the elements, so there's probably some problem where the javascript either gets an unexpected value, or is missing a value. But that code is syntactically correct.i dont know what else to do with this statement its annoying the ###### out of me it should work but as soon as i put that code in there it kills it. I have to move on to making this database dependent but i have no idea what i'm doing this is above my head but i have no help on it grrr Link to comment Share on other sites More sharing options...
justsomeguy Posted September 18, 2006 Share Posted September 18, 2006 Well, the first step is to figure out what the problem is. Open up the Javascript console in Firefox, or the Error Console in Opera, and see what the specific error message is. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now