dvilimek
28 May 2009, 12:49 PM
Hi everyone,
I have a dropdown of two countries (US and UK). With the US dropdown, a state field emerges. With the UK, I have two additional fields emerge. I need the overall width of these dropdowns to remain the smae, which is why the UK dropdowns are smaller so that all 3 fields fill teh same width as the 2 US fields. Problem is, I get a "Length in Null or Not an Object" error if I select the US field.
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="eventupload">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<script type="text/javascript" src="java.js"></script>
</head>
<body onload="CreateProvince(),CreateProvince2()">
<form action="" method="post" enctype="multipart/form-data" name="reg" id="reg" onsubmit="return false;">
<tr>
<td class="label">Country:</td>
<td><div class="field_container">
<select class="select" name="country" id="country" onchange="CreateProvince(),CreateProvince2()">
<option value="Choose Country">Choose Country</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
<select class="select" name="SelectProvState" id="SelectProvState" onchange="CreateProvince2()" >
<option value=""></option>
</select>
<select class="select" name="SelectProvState2" id="SelectProvState2" >
<option value=""></option>
</select>
</div></td>
</tr>
</form>
</body>
</html>
Javascript:
<!--
function CreateProvince() {
d = document.getElementById("SelectProvState");
f = document.getElementById("country");
e = document.getElementById("SelectProvState2");
e.style.display="none";
d.style.display="none";
var Primary = document.reg.country.selectedIndex;
if ((Primary == null) || (Primary == 0)) return;
f.style.width="180px";
d.style.width="180px";
if (Primary == 1) {
f.style.width="120px";
d.style.display="inline";
d.style.width="120px";
e.style.display="inline";
var ProvState = new Array;
ProvState[0] = new Option("Choose Country");
ProvState[1] = new Option("England");
}
if (Primary == 2) {
f.style.width="180px";
d.style.display="inline";
d.style.width="180px";
var ProvState = new Array;
ProvState[0] = new Option("Please Select State");
ProvState[1] = new Option("Alabama");
ProvState[2] = new Option("Alaska");
ProvState[3] = new Option("Arizona");
ProvState[4] = new Option("Arkansas");
}
for (i=document.reg.SelectProvState.options.length; i>0; i--) {
document.reg.SelectProvState.options[i] = null;
}
for(i=0; i<ProvState.length; i++) {
document.reg.SelectProvState.options[i] = ProvState[i];
}
document.reg.SelectProvState.options[0].selected = true;
}
//-->
function CreateProvince2() {
var Primary = document.reg.country.selectedIndex;
var Secondary = document.reg.SelectProvState.selectedIndex;
e = document.getElementById("SelectProvState2");
if ((Primary == null) || (Primary == 0)) return;
e.style.display="none";
if ((Primary == 1) & (Secondary == 0)) {
e.style.display="inline";
var ProvState2 = new Array;
ProvState2[0] = new Option("Please Select County");
}
if ((Primary == 1) & (Secondary == 1)) {
e.style.display="inline";
var ProvState2 = new Array;
ProvState2[0] = new Option("Please Select County");
ProvState2[1] = new Option("Avon");
ProvState2[2] = new Option("Bedfordshire");
ProvState2[3] = new Option("Berkshire");
ProvState2[4] = new Option("Buckinghamshire");
}
for (i=document.reg.SelectProvState2.options.length; i>0; i--) {
document.reg.SelectProvState2.options[i] = null;
}
for(i=0; i<ProvState2.length; i++) {
document.reg.SelectProvState2.options[i] = ProvState2[i];
}
document.reg.SelectProvState2.options[0].selected = true;
}
Any suggestions?
Thanks,
Dino
I have a dropdown of two countries (US and UK). With the US dropdown, a state field emerges. With the UK, I have two additional fields emerge. I need the overall width of these dropdowns to remain the smae, which is why the UK dropdowns are smaller so that all 3 fields fill teh same width as the 2 US fields. Problem is, I get a "Length in Null or Not an Object" error if I select the US field.
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="eventupload">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<script type="text/javascript" src="java.js"></script>
</head>
<body onload="CreateProvince(),CreateProvince2()">
<form action="" method="post" enctype="multipart/form-data" name="reg" id="reg" onsubmit="return false;">
<tr>
<td class="label">Country:</td>
<td><div class="field_container">
<select class="select" name="country" id="country" onchange="CreateProvince(),CreateProvince2()">
<option value="Choose Country">Choose Country</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
<select class="select" name="SelectProvState" id="SelectProvState" onchange="CreateProvince2()" >
<option value=""></option>
</select>
<select class="select" name="SelectProvState2" id="SelectProvState2" >
<option value=""></option>
</select>
</div></td>
</tr>
</form>
</body>
</html>
Javascript:
<!--
function CreateProvince() {
d = document.getElementById("SelectProvState");
f = document.getElementById("country");
e = document.getElementById("SelectProvState2");
e.style.display="none";
d.style.display="none";
var Primary = document.reg.country.selectedIndex;
if ((Primary == null) || (Primary == 0)) return;
f.style.width="180px";
d.style.width="180px";
if (Primary == 1) {
f.style.width="120px";
d.style.display="inline";
d.style.width="120px";
e.style.display="inline";
var ProvState = new Array;
ProvState[0] = new Option("Choose Country");
ProvState[1] = new Option("England");
}
if (Primary == 2) {
f.style.width="180px";
d.style.display="inline";
d.style.width="180px";
var ProvState = new Array;
ProvState[0] = new Option("Please Select State");
ProvState[1] = new Option("Alabama");
ProvState[2] = new Option("Alaska");
ProvState[3] = new Option("Arizona");
ProvState[4] = new Option("Arkansas");
}
for (i=document.reg.SelectProvState.options.length; i>0; i--) {
document.reg.SelectProvState.options[i] = null;
}
for(i=0; i<ProvState.length; i++) {
document.reg.SelectProvState.options[i] = ProvState[i];
}
document.reg.SelectProvState.options[0].selected = true;
}
//-->
function CreateProvince2() {
var Primary = document.reg.country.selectedIndex;
var Secondary = document.reg.SelectProvState.selectedIndex;
e = document.getElementById("SelectProvState2");
if ((Primary == null) || (Primary == 0)) return;
e.style.display="none";
if ((Primary == 1) & (Secondary == 0)) {
e.style.display="inline";
var ProvState2 = new Array;
ProvState2[0] = new Option("Please Select County");
}
if ((Primary == 1) & (Secondary == 1)) {
e.style.display="inline";
var ProvState2 = new Array;
ProvState2[0] = new Option("Please Select County");
ProvState2[1] = new Option("Avon");
ProvState2[2] = new Option("Bedfordshire");
ProvState2[3] = new Option("Berkshire");
ProvState2[4] = new Option("Buckinghamshire");
}
for (i=document.reg.SelectProvState2.options.length; i>0; i--) {
document.reg.SelectProvState2.options[i] = null;
}
for(i=0; i<ProvState2.length; i++) {
document.reg.SelectProvState2.options[i] = ProvState2[i];
}
document.reg.SelectProvState2.options[0].selected = true;
}
Any suggestions?
Thanks,
Dino