Dynamic Select Lists - 1st Selection Effects 2nd!
in [General]
|
Prev: [PHP] Dynamic Select Lists - 1st Selection Effects 2nd!
Next: Dynamic Select Lists - 1st Selection Effects 2nd! -- SOLVED!!
From: "Boyd, Todd M." on 31 Jul 2008 12:55 > -----Original Message----- > From: Rahul S. Johari [mailto:sleepwalker(a)rahulsjohari.com] > Sent: Thursday, July 31, 2008 11:40 AM > To: php-general(a)lists.php.net > Subject: [PHP] Dynamic Select Lists - 1st Selection Effects 2nd! > > Ave, > > What I have is two Select (Drop-Down) lists (State & County) and I'm > populating them from a mySQL table. What I want is when the user > selects the State from the State List, the County List should only > pull out counties associated with that State. > > Now I know that you can create such an effect using Javascript or AJAX > and have nothing to do with PHP/mySQL - and I was able to accomplish > that - but only for lists where you could define data manually. I'm > not able to accomplish this at all with Lists that are pulling out > option data from a mySQL table. > > I'm also giving the User the opportunity to add as many State/County > combinations as possible in a box. > 'tis my code: > > <!-- *********** STATE/COUNTY BOX ************ --> > <TR> > <TD CLASS="blackText">State: </TD> > <TD CLASS="blackText"><SELECT NAME="d_state"> > <?php do { ?> > <OPTION VALUE="<?php echo > $row_D_STATE['STATE']?>"><?php echo > $row_D_STATE['STATE']?></OPTION> > <?php > } while ($row_D_STATE = > mysql_fetch_assoc($D_STATE)); > $rows = mysql_num_rows($D_STATE); > if($rows > 0) { > mysql_data_seek($D_STATE, 0); > $row_D_STATE = > mysql_fetch_assoc($D_STATE); > } > ?> > </SELECT> > </TD> > </TR> > <TR> > <TD CLASS="blackText">County: </TD> > <TD CLASS="blackText"> > <SELECT NAME="d_county"> > <OPTION VALUE="ALL" SELECTED>All</OPTION> > <?php do { ?> > <OPTION VALUE="<?php echo > $row_D_COUNTY['COUNTY']?>"><?php echo > $row_D_COUNTY['COUNTY']?></OPTION> > <?php > } while ($row_D_COUNTY = > mysql_fetch_assoc($D_COUNTY)); > $rows = mysql_num_rows($D_COUNTY); > if($rows > 0) { > mysql_data_seek($D_COUNTY, 0); > $row_D_COUNTY = > mysql_fetch_assoc($D_COUNTY); > } > ?> > </SELECT> <INPUT NAME="add_btn_1" TYPE="button" > VALUE="[+] Add" > onClick="document.AD_INVENTORY_FORM.d_state_county.value > +=document.AD_INVENTORY_FORM.d_state.value > +'/'+document.AD_INVENTORY_FORM.d_county.value+'\n';"> > </TD> > </TR> > <TR> > <TD CLASS="blackText" COLSPAN="2"><TEXTAREA > NAME="d_state_county" > COLS="26" ROWS="3"></TEXTAREA></TD> > </TR> > <!-- *********** STATE/COUNTY BOX ************ --> > > I'm not able to understand exactly how to manipulate the SQL Query or > otherwise force the 2nd Select List to only show records that match > the selected State. > > Any pointers? The page referenced by an AJAX XmlHttpRequest() doesn't have to be static. You can even use the query string to supply the AJAX call with parameters (or perhaps post a form instead). This way, you can pass the chosen state to the AJAX-requested page and use PHP on the other end to construct the appropriate counties selection list. AJAX could then push this result into a DIV that had, up until now, contained an empty selection list with no available options. Summary: Page has two DIVs: one for state list, one for county list (which is empty). User clicks first DIV's selection box, onChange JS method fires AJAX call to getCounties.php?state=XX (where XX is the chosen state). PHP on the other end builds a selection list for the given state and returns it to the AJAX call. The AJAX result is then assigned to the second div, which now contains the list of counties for the given state. HTH, Todd Boyd Web Programmer
From: "Rahul S. Johari" on 31 Jul 2008 13:27 On Jul 31, 2008, at 12:55 PM, Boyd, Todd M. wrote: >> -----Original Message----- >> From: Rahul S. Johari [mailto:sleepwalker(a)rahulsjohari.com] >> Sent: Thursday, July 31, 2008 11:40 AM >> To: php-general(a)lists.php.net >> Subject: [PHP] Dynamic Select Lists - 1st Selection Effects 2nd! >> >> Ave, >> >> What I have is two Select (Drop-Down) lists (State & County) and I'm >> populating them from a mySQL table. What I want is when the user >> selects the State from the State List, the County List should only >> pull out counties associated with that State. >> >> Now I know that you can create such an effect using Javascript or >> AJAX >> and have nothing to do with PHP/mySQL - and I was able to accomplish >> that - but only for lists where you could define data manually. I'm >> not able to accomplish this at all with Lists that are pulling out >> option data from a mySQL table. >> >> I'm also giving the User the opportunity to add as many State/County >> combinations as possible in a box. >> 'tis my code: >> >> <!-- *********** STATE/COUNTY BOX ************ > --> >> <TR> >> <TD CLASS="blackText">State: </TD> >> <TD CLASS="blackText"><SELECT > NAME="d_state"> >> <?php do { ?> >> <OPTION VALUE="<?php echo >> $row_D_STATE['STATE']?>"><?php echo >> $row_D_STATE['STATE']?></OPTION> >> <?php >> } while ($row_D_STATE = >> mysql_fetch_assoc($D_STATE)); >> $rows = > mysql_num_rows($D_STATE); >> if($rows > 0) { >> > mysql_data_seek($D_STATE, 0); >> $row_D_STATE = >> mysql_fetch_assoc($D_STATE); >> } >> ?> >> </SELECT> >> </TD> >> </TR> >> <TR> >> <TD CLASS="blackText">County: </TD> >> <TD CLASS="blackText"> >> <SELECT NAME="d_county"> >> <OPTION VALUE="ALL" > SELECTED>All</OPTION> >> <?php do { ?> >> <OPTION VALUE="<?php echo >> $row_D_COUNTY['COUNTY']?>"><?php echo >> $row_D_COUNTY['COUNTY']?></OPTION> >> <?php >> } while ($row_D_COUNTY = >> mysql_fetch_assoc($D_COUNTY)); >> $rows = > mysql_num_rows($D_COUNTY); >> if($rows > 0) { >> > mysql_data_seek($D_COUNTY, 0); >> $row_D_COUNTY = >> mysql_fetch_assoc($D_COUNTY); >> } >> ?> >> </SELECT> <INPUT NAME="add_btn_1" > TYPE="button" >> VALUE="[+] Add" >> onClick="document.AD_INVENTORY_FORM.d_state_county.value >> +=document.AD_INVENTORY_FORM.d_state.value >> +'/'+document.AD_INVENTORY_FORM.d_county.value+'\n';"> >> </TD> >> </TR> >> <TR> >> <TD CLASS="blackText" > COLSPAN="2"><TEXTAREA >> NAME="d_state_county" >> COLS="26" ROWS="3"></TEXTAREA></TD> >> </TR> >> <!-- *********** STATE/COUNTY BOX ************ > --> >> >> I'm not able to understand exactly how to manipulate the SQL Query or >> otherwise force the 2nd Select List to only show records that match >> the selected State. >> >> Any pointers? > > The page referenced by an AJAX XmlHttpRequest() doesn't have to be > static. You can even use the query string to supply the AJAX call with > parameters (or perhaps post a form instead). This way, you can pass > the > chosen state to the AJAX-requested page and use PHP on the other end > to > construct the appropriate counties selection list. AJAX could then > push > this result into a DIV that had, up until now, contained an empty > selection list with no available options. > > Summary: Page has two DIVs: one for state list, one for county list > (which is empty). User clicks first DIV's selection box, onChange JS > method fires AJAX call to getCounties.php?state=XX (where XX is the > chosen state). PHP on the other end builds a selection list for the > given state and returns it to the AJAX call. The AJAX result is then > assigned to the second div, which now contains the list of counties > for > the given state. > > HTH, > > > Todd Boyd > Web Programmer In theory your solution sounds extremely feasible & perhaps the appropriate procedure. My problem is that I'm not an expert at all in AJAX (Or javascript for that matter). The manually-fed examples I worked with were freely available sources for such a functional Select List, and I tried manipulating them to fit in my php/mySQL code but to no avail. I'll try & work this out, but I doubt I'll be able to. Thanks. --- Rahul Sitaram Johari Founder, Internet Architects Group, Inc. [Email] sleepwalker(a)rahulsjohari.com [Web] http://www.rahulsjohari.com
From: "Boyd, Todd M." on 31 Jul 2008 14:31 > -----Original Message----- > From: Rahul S. Johari [mailto:sleepwalker(a)rahulsjohari.com] > Sent: Thursday, July 31, 2008 12:27 PM > To: Boyd, Todd M. > Cc: php-general(a)lists.php.net > Subject: Re: [PHP] Dynamic Select Lists - 1st Selection Effects 2nd! > > > On Jul 31, 2008, at 12:55 PM, Boyd, Todd M. wrote: > > >> -----Original Message----- > >> From: Rahul S. Johari [mailto:sleepwalker(a)rahulsjohari.com] > >> Sent: Thursday, July 31, 2008 11:40 AM > >> To: php-general(a)lists.php.net > >> Subject: [PHP] Dynamic Select Lists - 1st Selection Effects 2nd! > >> > >> Ave, > >> > >> What I have is two Select (Drop-Down) lists (State & County) and I'm > >> populating them from a mySQL table. What I want is when the user > >> selects the State from the State List, the County List should only > >> pull out counties associated with that State. > >> > >> Now I know that you can create such an effect using Javascript or > >> AJAX > >> and have nothing to do with PHP/mySQL - and I was able to accomplish > >> that - but only for lists where you could define data manually. I'm > >> not able to accomplish this at all with Lists that are pulling out > >> option data from a mySQL table. > >> > >> I'm also giving the User the opportunity to add as many State/County > >> combinations as possible in a box. ---8<--- snip > >> I'm not able to understand exactly how to manipulate the SQL Query > or > >> otherwise force the 2nd Select List to only show records that match > >> the selected State. > >> > >> Any pointers? > > > > The page referenced by an AJAX XmlHttpRequest() doesn't have to be > > static. You can even use the query string to supply the AJAX call > with > > parameters (or perhaps post a form instead). This way, you can pass > > the > > chosen state to the AJAX-requested page and use PHP on the other end > > to > > construct the appropriate counties selection list. AJAX could then > > push > > this result into a DIV that had, up until now, contained an empty > > selection list with no available options. > > > > Summary: Page has two DIVs: one for state list, one for county list > > (which is empty). User clicks first DIV's selection box, onChange JS > > method fires AJAX call to getCounties.php?state=XX (where XX is the > > chosen state). PHP on the other end builds a selection list for the > > given state and returns it to the AJAX call. The AJAX result is then > > assigned to the second div, which now contains the list of counties > > for > > the given state. > > > In theory your solution sounds extremely feasible & perhaps the > appropriate procedure. My problem is that I'm not an expert at all in > AJAX (Or javascript for that matter). The manually-fed examples I > worked with were freely available sources for such a functional Select > List, and I tried manipulating them to fit in my php/mySQL code but to > no avail. > > I'll try & work this out, but I doubt I'll be able to. > > Thanks. Rahul, Aww, come now... don't be so negative! :) Most widely-adopted programming practices are widely-adopted for a reason: they are not inherently difficult to use. This does, of course, get obfuscated by various extensions and poor programming techniques end-users employ, but I digress. http://www.w3schools.com/ajax/ should get you started, but here's a simple implementation: selection.html: --- <div id="stateDiv"> <select id="stateList" name="state" onchange="ajaxCounties();"> <option value="Alabama">Alabama</option> <option value="Alaska">Alaska</option> <!-- You get the idea... --> </select> </div> <!-- /stateDiv --> <div id="countyDiv"> <select name="county"> <option value=""></option> </select> </div> <!-- /countyDiv --> <script type="text/javascript"> function ajaxCounties() { var xmlHttp; var stateList = document.getElementById("stateList"); try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { // Older IE try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { // AJAX unsupported alert("Your browser does not support AJAX!"); return false; } } } // ajax actions xmlHttp.onReadyStateChange = function() { // data returned from server if(xmlHttp.readyState == 4) { // fill div with server-generated <select> element document.getElementById("countyDiv").innerHTML = xmlHttp.responseText; } } // request counties from web server xmlHttp.open("GET", "county.php?state=" + stateList.options[stateList.selectedIndex].value, true); xmlHttp.send(null); } </script> --- I'll leave the PHP implementation up to you... but it'll look something like this: county.php --- <select id="countyList" name="county"> <?php // perform query here. for(a = 0; a < mysql_num_rows($result); a++) { $row = mysql_fetch_array($result); echo "<option value=\"{$row['countyId']}\">{$row['countyName']}" . "</option>"; } ?> </select> --- HTH, Todd Boyd Web Programmer
From: "Andrew Ballard" on 31 Jul 2008 14:32 On Thu, Jul 31, 2008 at 12:40 PM, Rahul S. Johari <sleepwalker(a)rahulsjohari.com> wrote: > Ave, > > What I have is two Select (Drop-Down) lists (State & County) and I'm > populating them from a mySQL table. What I want is when the user selects the > State from the State List, the County List should only pull out counties > associated with that State. [snip] This is a usability issue rather than a code issue, but wouldn't you want that to be the other way around? (ie, select the country from a list and it populates the state list with states/provinces/territories/adminstrative disticts/etc. that belong to that country?) I know the order is "backward" from how one typically writes an address on paper, but otherwise your state list will be HUGE and often your country list would only have one value after the user selects a state. Andrew
From: "Andrew Ballard" on 31 Jul 2008 14:38
On Thu, Jul 31, 2008 at 2:31 PM, Boyd, Todd M. <tmboyd1(a)ccis.edu> wrote: >> -----Original Message----- >> From: Rahul S. Johari [mailto:sleepwalker(a)rahulsjohari.com] >> Sent: Thursday, July 31, 2008 12:27 PM >> To: Boyd, Todd M. >> Cc: php-general(a)lists.php.net >> Subject: Re: [PHP] Dynamic Select Lists - 1st Selection Effects 2nd! >> >> >> On Jul 31, 2008, at 12:55 PM, Boyd, Todd M. wrote: >> >> >> -----Original Message----- >> >> From: Rahul S. Johari [mailto:sleepwalker(a)rahulsjohari.com] >> >> Sent: Thursday, July 31, 2008 11:40 AM >> >> To: php-general(a)lists.php.net >> >> Subject: [PHP] Dynamic Select Lists - 1st Selection Effects 2nd! >> >> >> >> Ave, >> >> >> >> What I have is two Select (Drop-Down) lists (State & County) and > I'm >> >> populating them from a mySQL table. What I want is when the user >> >> selects the State from the State List, the County List should only >> >> pull out counties associated with that State. >> >> >> >> Now I know that you can create such an effect using Javascript or >> >> AJAX >> >> and have nothing to do with PHP/mySQL - and I was able to > accomplish >> >> that - but only for lists where you could define data manually. I'm >> >> not able to accomplish this at all with Lists that are pulling out >> >> option data from a mySQL table. >> >> >> >> I'm also giving the User the opportunity to add as many > State/County >> >> combinations as possible in a box. > > ---8<--- snip > >> >> I'm not able to understand exactly how to manipulate the SQL Query >> or >> >> otherwise force the 2nd Select List to only show records that match >> >> the selected State. >> >> >> >> Any pointers? >> > >> > The page referenced by an AJAX XmlHttpRequest() doesn't have to be >> > static. You can even use the query string to supply the AJAX call >> with >> > parameters (or perhaps post a form instead). This way, you can pass >> > the >> > chosen state to the AJAX-requested page and use PHP on the other end >> > to >> > construct the appropriate counties selection list. AJAX could then >> > push >> > this result into a DIV that had, up until now, contained an empty >> > selection list with no available options. >> > >> > Summary: Page has two DIVs: one for state list, one for county list >> > (which is empty). User clicks first DIV's selection box, onChange JS >> > method fires AJAX call to getCounties.php?state=XX (where XX is the >> > chosen state). PHP on the other end builds a selection list for the >> > given state and returns it to the AJAX call. The AJAX result is then >> > assigned to the second div, which now contains the list of counties >> > for >> > the given state. >> > >> In theory your solution sounds extremely feasible & perhaps the >> appropriate procedure. My problem is that I'm not an expert at all in >> AJAX (Or javascript for that matter). The manually-fed examples I >> worked with were freely available sources for such a functional Select >> List, and I tried manipulating them to fit in my php/mySQL code but to >> no avail. >> >> I'll try & work this out, but I doubt I'll be able to. >> >> Thanks. > > Rahul, > > Aww, come now... don't be so negative! :) Most widely-adopted > programming practices are widely-adopted for a reason: they are not > inherently difficult to use. This does, of course, get obfuscated by > various extensions and poor programming techniques end-users employ, but > I digress. > > http://www.w3schools.com/ajax/ should get you started, but here's a > simple implementation: > > selection.html: > --- > <div id="stateDiv"> > <select id="stateList" name="state" onchange="ajaxCounties();"> > <option value="Alabama">Alabama</option> > <option value="Alaska">Alaska</option> > <!-- > You get the idea... > --> > </select> > </div> <!-- /stateDiv --> > <div id="countyDiv"> > <select name="county"> > <option value=""></option> > </select> > </div> <!-- /countyDiv --> > <script type="text/javascript"> > > function ajaxCounties() > { > var xmlHttp; > var stateList = document.getElementById("stateList"); > > try { > // Firefox, Opera 8.0+, Safari > xmlHttp = new XMLHttpRequest(); > } catch (e) { > // Internet Explorer > try { > xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); > } catch (e) { > // Older IE > try { > xmlHttp = new > ActiveXObject("Microsoft.XMLHTTP"); > } catch (e) { > // AJAX unsupported > alert("Your browser does not support > AJAX!"); > return false; > } > } > } > > // ajax actions > xmlHttp.onReadyStateChange = function() > { > // data returned from server > if(xmlHttp.readyState == 4) { > // fill div with server-generated <select> > element > document.getElementById("countyDiv").innerHTML = > xmlHttp.responseText; > } > } > > // request counties from web server > xmlHttp.open("GET", "county.php?state=" + > stateList.options[stateList.selectedIndex].value, true); > xmlHttp.send(null); > } > > </script> > --- > > I'll leave the PHP implementation up to you... but it'll look something > like this: > > county.php > --- > <select id="countyList" name="county"> > <?php > // perform query here. > > for(a = 0; a < mysql_num_rows($result); a++) { > $row = mysql_fetch_array($result); > echo "<option > value=\"{$row['countyId']}\">{$row['countyName']}" > . "</option>"; > } > ?> > </select> > --- > > HTH, > > > Todd Boyd > Web Programmer > You MAY want to use an existing library like YUI for this. I've found that a lot of the simple AJAX examples I've found on the net have memory leaks, especially in IE. The YUI kit seems to avoid these; I can't speak for other libraries that are available. Plus, you get an API to (hopefully) simplify things. http://developer.yahoo.com/yui/ Andrew |