PDA

Click to See Complete Forum and Search --> : Question re: dynamically updating form elements

James L.
08-28-2004, 12:31 AM
Hey all,

I have searched the forums, but have not adequately figured out what I am after. Truth be told I am not sure why this isn't clicking for me, as it shouldn't be that hard.

I have a form with two select elements (drop down menus). I am looking to have the contents of one change based on the selection of the other. So, for example:

Menu one is COUNTRY, with the following two options:

Canada
America


Menu two is PROVINCE/STATE, and will change dynamically based on the selection in menu one. So, if menu one read:

COUNTRY: Canada

Menu two (PROVINCE/STATE) would list:

British Columbia
Alberta
Manitoba
Ontario
...etc

If menu one was changed to read:

COUNTRY: America

Menu two (PROVINCE/STATE) would change dynamically to read:

Arizona
California
New Jersey
Detroit
...etc


Now, I know I will need an "onchange()" event handler in menu one (the COUNTRY menu), so when it is changed menu two (the PROVINCE/STATE) changes its contents from the provinces to the states.

I am just not sure how to set up the select elements in the form. For example, If I set it to the Provinces in the html side of things, I know I can access those elements using an array from within Javascript. I am guessing I could change the value of each select option, but one list would be 13 items long (the provinces), while the other would be 51 items long (the states).

Any help would be greatly appreciated!

Cheers,

James
HaganeNoKokoro
08-28-2004, 01:15 AM
Here's some example code that changes the second list based on the choice of the first list. (I have only put a couple of states/provinces in the arrays, but it should work with any number) Note that all the selections are initially available so that a user without javascript can still use the lists.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<script type="text/javascript">
<!--

var provs = new Array();
provs[0]="BC,British Columbia";
provs[1]="AB,Alberta";

var states = new Array();
states[0]="WA,Washington";
states[1]="CA,California";

function changeSelect() {
while(ge('state1').options.length>0) {
ge('state1').remove(0);
}
if(ge('country1').selectedIndex==1) {
for(var i=0; i<provs.length; i++) {
var obj=document.createElement("OPTION");
obj.value=provs[i].split(",")[0];
obj.text=provs[i].split(",")[1];
ge('state1').options[i]=obj;
}
}
if(ge('country1').selectedIndex==2) {
for(var i=0; i<states.length; i++) {
var obj=document.createElement("OPTION");
obj.value=states[i].split(",")[0];
obj.text=states[i].split(",")[1];
ge('state1').options[i]=obj;
}
}
}

function ge(id) {
return document.getElementById(id);
}

// -->
</script>

</head>
<body>
<p>
<select id="country1" name="country1" onchange="changeSelect()">
<option value="CHOOSE">Choose</option>
<option value="Canada">Canada</option>
<option value="America">America</option>
</select>

<select id="state1" name="state1">
<option value="CHOOSE">Choose</option>
<option value="BC">British Columbia</option>
<option value="AB">Alberta</option>
<option value="WA">Washington</option>
<option value="TX">Texas</option>
</select>
</p>
</body>
</html>
James L.
08-28-2004, 01:18 AM
I won't have time to play with it until tomorrow, but thanks for the awesome, quick response time!

Cheers,

James
simpson97
08-28-2004, 02:02 AM
Heres one that will work with most browsers.

<html>
<head>
<script language='javascript' type='text/javascript'>
<!-- //
namArr = new Array("Canada", "United States");
prodArr = new Array();
prodArr[0] = new Array("Alberta", "Manitoba", "Ontario");
prodArr[1] = new Array("California", "Oregon", "Washington");
function changeItems(inForm, obj)
{
var r = obj.options[obj.selectedIndex].index;
var l = inForm.items.options.length;
for(var i = 0; i < l; i++)
{
inForm.items.options[0] = null;
}
for(var c = 0; c < prodArr[r].length; c++)
{
inForm.items.options[c] = new Option(prodArr[r][c]);
}
}
// -->
</script>
</head>
<body text=#888888 bgcolor=#ffcc99>
<center>
<form name='goods'>
<table border=0 style='border: 1px #000000 solid;background-color: #ffffff' cellpadding=4>
<tbody>
<tr>
<td align=right width=110>
<small><b>Country.:</b></small>
</td>
<td width=150>
<select name='products' onchange='changeItems(this.form, this)'>
<option value='Canada'>Canada</option>
<option value='United States'>United States</option>
</select>
</td>
</tr>
<tr>
<td align=right>
<small><b>State/Province.:</b></small>
</td>
<td>
<select name='items'>
<option value='Alberta'>Alberta</option>
<option value='Manitoba'>Manitoba</option>
<option value='Ontario'>Ontario</option>

</select>
</td>
</tr>
</tbody>
</table>
<p />
<a href='mailto:simpson_97@yahoo.com'>Email Bob</a>
</center>
</body>
</html>

Bob