I have a combo of 3 listboxes which I would like to repopulate ( the 2nd and the 3rd listboxes ) after the selection of the 1st listbox. I don't understand how the page should refresh itself once selected. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <script language="JavaScript" type="text/javascript"> <!-- function go(action) { // set variables pointing to the two forms we need var theForm = document.forms["myForm"]; var otherForm = window.parent.document.forms["myForm"]; // construct the "search" part of the URL from all the elements var query = "?Book=" + theForm.Book.options[theForm.Book.selectedIndex].value; query += "&Chapter=" + theForm.Chapter.options[theForm.Chapter.selectedIndex].value; // test to see if a verse has been selected, if not we won't pass the values if( theForm.verse.selectedIndex != -1 ) { for( var i=0; i < theForm.verse.options.length; i++ ) { if( theForm.verse.options[i].selected ) { query += "&Verse=" + theForm.verse.options[i].value; } } } query += "&Keyword=" + escape(otherForm.Keyword.value); query += "&Keywordb=" + escape(otherForm.Keywordb.value); query += "&Keywordc=" + escape(otherForm.Keywordc.value); query += "&Keywordd=" + escape(otherForm.Keywordd.value); query += "&Keyworde=" + escape(otherForm.Keyworde.value); query += "&Keywordf=" + escape(otherForm.Keywordf.value); query += "&"; // either redirect this page or the child frame depending on which select was changed if(action == "refresh") { location.href = "showbook.php" + query; } else { ifrVerse.location.href = "showverse.php" + query; } } //--> </script> </head> <body> <table border="0" bgcolor="#FFFCDC"> <td> <form name="myForm" id="myForm" action="showverse.php" method="get" target="ifrVerse"> <table border="0" bgcolor="#FFFCDC"> <tr> <th align="center" color="white"> </tr> <tr> <th colspan="1" align="center">book</th> <th colspan="1" align="center">chapter</th> </tr> <tr> <td> <?php require_once('mysql.php'); ?> <input type="hidden" name="Keyword" value="" /> <input type="hidden" name="Keywordb" value="" /> <input type="hidden" name="Keywordc" value="" /> <input type="hidden" name="Keywordd" value="" /> <input type="hidden" name="Keyworde" value="" /> <input type="hidden" name="Keywordf" value="" /> <?php $result = mysql_query("SELECT DISTINCT book_title, book FROM bible"); echo "<a name='bcv'><select name='Book' id='Book' size='5' style='width:150px;' onChange=\"go('refresh');\"></a>"."\n"; while($row = mysql_fetch_array($result)) { echo "<option value='" . $row['book'] . "'>"; echo $row['book_title']; echo "</option>"."\n"; } echo "</select>"."\n"; ?> </td> <td colspan="1" align="center"> <?php $book = $_GET["Book"]; $result = mysql_query("SELECT DISTINCT chapter, book FROM bible WHERE book = '" . $book . "'"); echo "<select name='Chapter' id='Chapter' size='5' style='width:150px;' onChange=\"go('refresh');\">"."\n"; while($row = mysql_fetch_array($result)) { echo "<option value='" . $row['chapter'] . "'>"; echo $row['chapter']; echo "</option>"."\n"; } echo "</select>"."\n"; mysql_close($con); ?> </td> </tr> <td colspan="2" align="center"> </td> </tr> <tr colspan="2" align="center"> <th colspan="3" align="center" color="black"> verse </th> </tr> <td colspan="2" align="center"> <select multiple name="verse" size="5" style="width:120;" onChange="go('update');"> </td> <tr> <td align="center" colspan="2"> <iframe name="ifrVerse" id="ifrVerse" src="blank.php" style="height:800px; width:250px;border:0;"></iframe> </td> </tr> </table> </form> </td> </table> </body> </html> PHP:
i would do something like <select name="" onchange="top.location.href=this.options[this.selectedIndex].value;" > <option value="url.php?id=<?php echo $id;?>">
Take a look at AJAX. There are tons of examples. Basically you can POST the FORM onclick/onchange to call your php query without refreshing the page. The responseXML will be DOM represented as listbox 2 & 3. The setup is a little involved but it will make life simpler down-the-road.
http://www.dhtmlgoodies.com/index.html?whichScript=ajax_chained_select Ready to go solution + many more pre-made ajax scripts there...
I'm looking at the link you sent and when I test it it shows error: listcom.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> <style type="text/css"> body{ background-repeat:no-repeat; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; height:100%; background-color: #FFF; margin:0px; padding:0px; } select{ width:150px; } </style> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript"> /************************************************************************************************************ Ajax chained select Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA Dhtmlgoodies.com., hereby disclaims all copyright interest in this script written by Alf Magne Kalleland. Alf Magne Kalleland, 2006 Owner of DHTMLgoodies.com ************************************************************************************************************/ var ajax = new Array(); function getCityList(sel) { var countryCode = sel.options[sel.selectedIndex].value; document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box if(countryCode.length>0){ var index = ajax.length; ajax[index] = new sack(); ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found ajax[index].runAJAX(); // Execute AJAX function } } function createCities(index) { var obj = document.getElementById('dhtmlgoodies_city'); eval(ajax[index].response); // Executing the response from Ajax as Javascript code } function getSubCategoryList(sel) { var category = sel.options[sel.selectedIndex].value; document.getElementById('dhtmlgoodies_subcategory').options.length = 0; // Empty city select box if(category.length>0){ var index = ajax.length; ajax[index] = new sack(); ajax[index].requestFile = 'getSubCategories.php?category='+category; // Specifying which file to get ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found ajax[index].runAJAX(); // Execute AJAX function } } function createSubCategories(index) { var obj = document.getElementById('dhtmlgoodies_subcategory'); eval(ajax[index].response); // Executing the response from Ajax as Javascript code } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <form action="" method="post"> <table> <tr> <td>Country: </td> <td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)"> <option value="">Select a country</option> <option value="dk">Denmark</option> <option value="no">Norway</option> <option value="us">US</option> </select> </td> </tr> <tr> <td>City: </td> <td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city"> </select> </td> </tr> <tr> <td colspan="2"><b>Second example</b></td> </tr> <tr> <td>Category: </td> <td><select id="dhtmlgoodies_category" name="dhtmlgoodies_category" onchange="getSubCategoryList(this)"> <option value="">Select a category</option> <option value="1">Cars</option> <option value="2">Boats</option> <option value="3">Airplanes</option> </select> </td> </tr> <tr> <td>Sub category: </td> <td><select id="dhtmlgoodies_subcategory" name="dhtmlgoodies_subcategory"> </select> </td> </tr> </table> </form> </body> </html> Code (markup): more to come.
getCities.php <?php if(isset($_GET['countryCode'])){ switch($_GET['countryCode']){ case "no": echo "obj.options[obj.options.length] = new Option('Bergen','1');\n"; echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n"; echo "obj.options[obj.options.length] = new Option('Oslo','3');\n"; echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n"; break; case "dk": echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n"; echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n"; echo "obj.options[obj.options.length] = new Option('Odense','13');\n"; break; case "us": echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n"; echo "obj.options[obj.options.length] = new Option('Chicago','22');\n"; echo "obj.options[obj.options.length] = new Option('Denver','23');\n"; echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n"; echo "obj.options[obj.options.length] = new Option('New York','25');\n"; echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n"; echo "obj.options[obj.options.length] = new Option('Seattle','27');\n"; break; } } ?> PHP:
js/ajax.js // JavaScript Document /* Simple AJAX Code-Kit (SACK) v1.6.1 */ /* ©2005 Gregory Wild-Smith */ /* www.twilightuniverse.com */ /* Software licenced under a modified X11 licence, see documentation or authors website for more details */ function sack(file) { this.xmlhttp = null; this.resetData = function() { this.method = "POST"; this.queryStringSeparator = "?"; this.argumentSeparator = "&"; this.URLString = ""; this.encodeURIString = true; this.execute = false; this.element = null; this.elementObj = null; this.requestFile = file; this.vars = new Object(); this.responseStatus = new Array(2); }; this.resetFunctions = function() { this.onLoading = function() { }; this.onLoaded = function() { }; this.onInteractive = function() { }; this.onCompletion = function() { }; this.onError = function() { }; this.onFail = function() { }; }; this.reset = function() { this.resetFunctions(); this.resetData(); }; this.createAJAX = function() { try { this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { this.xmlhttp = null; } } if (! this.xmlhttp) { if (typeof XMLHttpRequest != "undefined") { this.xmlhttp = new XMLHttpRequest(); } else { this.failed = true; } } }; this.setVar = function(name, value){ this.vars[name] = Array(value, false); }; this.encVar = function(name, value, returnvars) { if (true == returnvars) { return Array(encodeURIComponent(name), encodeURIComponent(value)); } else { this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true); } } this.processURLString = function(string, encode) { encoded = encodeURIComponent(this.argumentSeparator); regexp = new RegExp(this.argumentSeparator + "|" + encoded); varArray = string.split(regexp); for (i = 0; i < varArray.length; i++){ urlVars = varArray[i].split("="); if (true == encode){ this.encVar(urlVars[0], urlVars[1]); } else { this.setVar(urlVars[0], urlVars[1]); } } } this.createURLString = function(urlstring) { if (this.encodeURIString && this.URLString.length) { this.processURLString(this.URLString, true); } if (urlstring) { if (this.URLString.length) { this.URLString += this.argumentSeparator + urlstring; } else { this.URLString = urlstring; } } // prevents caching of URLString this.setVar("rndval", new Date().getTime()); urlstringtemp = new Array(); for (key in this.vars) { if (false == this.vars[key][1] && true == this.encodeURIString) { encoded = this.encVar(key, this.vars[key][0], true); delete this.vars[key]; this.vars[encoded[0]] = Array(encoded[1], true); key = encoded[0]; } urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0]; } if (urlstring){ this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator); } else { this.URLString += urlstringtemp.join(this.argumentSeparator); } } this.runResponse = function() { eval(this.response); } this.runAJAX = function(urlstring) { if (this.failed) { this.onFail(); } else { this.createURLString(urlstring); if (this.element) { this.elementObj = document.getElementById(this.element); } if (this.xmlhttp) { var self = this; if (this.method == "GET") { totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString; this.xmlhttp.open(this.method, totalurlstring, true); } else { this.xmlhttp.open(this.method, this.requestFile, true); try { this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") } catch (e) { } } this.xmlhttp.onreadystatechange = function() { switch (self.xmlhttp.readyState) { case 1: self.onLoading(); break; case 2: self.onLoaded(); break; case 3: self.onInteractive(); break; case 4: self.response = self.xmlhttp.responseText; self.responseXML = self.xmlhttp.responseXML; self.responseStatus[0] = self.xmlhttp.status; self.responseStatus[1] = self.xmlhttp.statusText; if (self.execute) { self.runResponse(); } if (self.elementObj) { elemNodeName = self.elementObj.nodeName; elemNodeName.toLowerCase(); if (elemNodeName == "input" || elemNodeName == "select" || elemNodeName == "option" || elemNodeName == "textarea") { self.elementObj.value = self.response; } else { self.elementObj.innerHTML = self.response; } } if (self.responseStatus[0] == "200") { self.onCompletion(); } else { self.onError(); } self.URLString = ""; break; } }; this.xmlhttp.send(this.URLString); } } }; this.reset(); this.createAJAX(); } Code (markup):
ok I noticed that the js file and the php was to be inserted in the getCities.php ( not sure where exactly but I assume in between the select tags of the 2nd listbox ) was not in the proper place. But when I fixed that I got this error: Error: syntax error Source File: listboxcombo/getCities.php Line: 65 Source Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Code (markup): <!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> <style type="text/css"> body{ background-repeat:no-repeat; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; height:100%; background-color: #FFF; margin:0px; padding:0px; } select{ width:150px; } </style> <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript"> /************************************************************************************************************ Ajax chained select Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA Dhtmlgoodies.com., hereby disclaims all copyright interest in this script written by Alf Magne Kalleland. Alf Magne Kalleland, 2006 Owner of DHTMLgoodies.com ************************************************************************************************************/ var ajax = new Array(); function getCityList(sel) { var countryCode = sel.options[sel.selectedIndex].value; document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box if(countryCode.length>0){ var index = ajax.length; ajax[index] = new sack(); ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found ajax[index].runAJAX(); // Execute AJAX function } } function createCities(index) { var obj = document.getElementById('dhtmlgoodies_city'); eval(ajax[index].response); // Executing the response from Ajax as Javascript code } function getSubCategoryList(sel) { var category = sel.options[sel.selectedIndex].value; document.getElementById('dhtmlgoodies_subcategory').options.length = 0; // Empty city select box if(category.length>0){ var index = ajax.length; ajax[index] = new sack(); ajax[index].requestFile = 'getSubCategories.php?category='+category; // Specifying which file to get ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found ajax[index].runAJAX(); // Execute AJAX function } } function createSubCategories(index) { var obj = document.getElementById('dhtmlgoodies_subcategory'); eval(ajax[index].response); // Executing the response from Ajax as Javascript code } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Listbox Combo</title> </head> <body> <form action="" method="post"> <table> <tr> <td>Country: </td> <td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)"> <option value="">Select a country</option> <option value="dk">Denmark</option> <option value="no">Norway</option> <option value="us">US</option> </select> </td> </tr> <tr> <td>City: </td> <td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city"> <?php if(isset($_GET['countryCode'])){ switch($_GET['countryCode']){ case "no": echo "obj.options[obj.options.length] = new Option('Bergen','1');\n"; echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n"; echo "obj.options[obj.options.length] = new Option('Oslo','3');\n"; echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n"; break; case "dk": echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n"; echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n"; echo "obj.options[obj.options.length] = new Option('Odense','13');\n"; break; case "us": echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n"; echo "obj.options[obj.options.length] = new Option('Chicago','22');\n"; echo "obj.options[obj.options.length] = new Option('Denver','23');\n"; echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n"; echo "obj.options[obj.options.length] = new Option('New York','25');\n"; echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n"; echo "obj.options[obj.options.length] = new Option('Seattle','27');\n"; break; } } ?> </select> </td> </tr> <tr> <td colspan="2"><b>Second example</b></td> </tr> <tr> <td>Category: </td> <td><select id="dhtmlgoodies_category" name="dhtmlgoodies_category" onchange="getSubCategoryList(this)"> <option value="">Select a category</option> <option value="1">Cars</option> <option value="2">Boats</option> <option value="3">Airplanes</option> </select> </td> </tr> <tr> <td>Sub category: </td> <td><select id="dhtmlgoodies_subcategory" name="dhtmlgoodies_subcategory"> </select> </td> </tr> </table> </form> </body> </html> PHP:
Oh yeah line 65 is: eval(ajax[index].response); // Executing the response from Ajax as Javascript code Code (markup):