[Javascript] (no subject)

[javascript@xxxxxxxxxx (Hudspeth, Bill)]

I am having a problem passing a variable from PHP to Javascript and getting
my JS function to recognize a form element object. I am trying to use the
selection of a particular option in a dropdown menu to control the
visibility of another form control element (another select box). In other
words, when the user selects the third option in the menu named
"petsubtype", the menu named "chonpetsub" should become visible. Similarly,
if the third option is deselected, the latter menu should once again
disappear. When I click on any of the options in the first menu (i.e.,
"petsubtype"), I get a Javascript warning that says "elementname.length is
null or not an object". Any help would be greatly appreciated.

//**************************************************************************
***************************

function PetSubToggle(id, elementname, form) {

alert("Function call here successful");

for(var i=0; i<form.elementname.length; i++){
	//alert("starting to cycle through loop");		
	if (form.elementname.options[i].selected == true){
		//alert("a selected choice is true");
       		if(i==3){        		
		if(document.getElementById(id).style.visibility){
	
if(document.getElementById(id).style.getAttribute("visibility")=="hidden"){
	
document.getElementById(id).style.setAttribute("visibility",visible)}
		
			else
if(document.getElementById(id).style.getAttribute("visibility")=="visible"){
	
document.getElementById(id).style.setAttribute("visibility",hidden)}
			
			else {	
alert("Your browser does not support proper display of this menu, please
upgrade or change browsers.")};
			}
	     	}
	  }
	}		 	
	
       return false
}
</SCRIPT>

<!--
//**************************************************************************
****************************
 -->
<SCRIPT language="php">

require 'dhtml_functions.inc';
require 'meteor_data_arrays.inc';

//**************************************************************************
****************************

$petsubname="petsubtype";	//used below to assign an name the the
petsub div id		
$elementname="chonpet";		//add column for petrologic types
$elementsarray="$chon_pet";	//an associative array

echo "<form>";
echo "<table><tr><td>";
	
echo "<select  name='$petsubname'
	id='$elementname'
	multiple 
	size='5' 
	onChange='PetSubToggle($petsubname, $elementname, this.form)'>";  
		
//display petro types in option list, beginning with select all

echo "<option value='$chon_pet[8]' selected>$chon_pet[8]</option>";
echo "<option value='$chon_pet[1]'>$chon_pet[1]</option>";	
echo "<option value='$chon_pet[2]'>$chon_pet[2]</option>";
echo "<option value='$chon_pet[3]'>$chon_pet[3]</option>";
echo "<option value='$chon_pet[4]'>$chon_pet[4]</option>";
echo "<option value='$chon_pet[5]'>$chon_pet[5]</option>";
echo "<option value='$chon_pet[6]'>$chon_pet[6]</option>";
echo "<option value='$chon_pet[7]'>$chon_pet[7]</option>";
echo "</select>";

//**************************************************************************
****************************

echo "</td><td>";
	
	
echo "<div id='$petsubname'
style='position:relative;left:0px;top:0px;visibility:hidden'>";
echo "<select name='chonpetsub' id='chonpetsub' multiple size='5'>";
echo "<option value='1'>3.1</option>";
echo "<option value='2'>3.2</option>";
echo "<option value='3'>3.3</option>";
echo "<option value='4'>3.4</option>";
echo "<option value='5'>3.5</option>";
echo "<option value='6'>3.6</option>";
echo "<option value='7'>3.7</option>";
echo "<option value='8'>3.8</option>";
echo "<option value='9'>3.9</option>";
echo "<option value='10'>All Types</option>";
echo "</select>";
echo "</div>";
echo "</td></tr></table></form>";

//**************************************************************************
****************************

</SCRIPT>