Length is Null or Not an Object

dvilimek · May 28, 2009

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:

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:

Code:

<!--

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

dvilimek · May 28, 2009

Solved....

I moved var ProvState/ProvState2 = new Array up under the declaration of Secondary in the CreateProvince()/CreateProvince2() functions.

Length is Null or Not an Object

dvilimek

New Member

dvilimek

New Member