Re: Dynamic Select Lists - 1st Selection Effects 2nd! -- SOLVED!!
| From: | Rahul S. Johari | Date: | Thu, 31 Jul 2008 19:05:47 +0000 |
| Subject: | Re: Dynamic Select Lists - 1st Selection Effects 2nd! -- SOLVED!! | ||
| References: | 1 2 3 4 | Groups: | php.general |
| Request: | Send a blank email to php-general+get-277561@lists.php.net to get a copy of this message | ||
Did IT!!!! Haha ... just as you were probably writing in & sending this mail.
I pretty much used your theory and actually did look around under http://www.w3schools.com/ajax/ to get the relevant AJAX information. Works like a charm.
Pretty much using an onChange=grabCountiesfromAnotherPHPpage(); function. Code is similar to your example below - slightly different. An included 'ajax.js' takes care of the AJAX code, and an additional 'counties.php' writes counties based on a "SELECT COUNTY from myTable WHERE STATE = $_GET['STATE']" SQL Query in an independent SELECT LIST. AJAX takes care of the rest by pulling in this SELECT LIST on to the original page.
Thanks a ton - this actually turned out to be easier then I thought!!
:)
On Jul 31, 2008, at 2:31 PM, Boyd, Todd M. wrote:
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
--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php
---
Rahul Sitaram Johari
Founder, Internet Architects Group, Inc.
[Email] sleepwalker@rahulsjohari.com
[Web] http://www.rahulsjohari.com