Help with Apearing and hiding text box in form

[Fallen_angel]

Hi ,

 

I have made a form where I have a few area's that contain drop down options  the last option in the drop box is an other option ,  what I want to do is have a text box appear when other is selected. 

 

I belive i am on my way with the code bellow however there is something wrong with how I did the seccond dropdown ( or junction not sure wich )

 

if somone could please have a look at this and tell me what i have missed or done wrong I woudl really apreaciate it ,  the top drop down works pretty much as it's suposed to ( drops down a line instead of apearing next to the drop down )  however the seccond other box is always there and never hides itself

 

the first ( workign ) function is

 

if(document.all && !document.getElementById) { //IE4 support
  document.getElementById = function(id) { return document.all[id]; }
}

/*

This works in Firefox, Netscape 6+, IE4+/Win, Opera 7+, Konqueror 3, Safari, 
IE5/Mac, and iCab 3.

*/
function customOption(selected) { //selected is the selected option
  if(!document.getElementById) return;

  // selected's value property is retrieved and converted to lower case to make 
  // comparing it to another string simpler
  var val = selected.value.toLowerCase();

  // gets the object reference for the element
  var el = document.getElementById('other1label');

  // if val is set to 'customoption' show the textbox
  if(val == 'customoption') {
    el.style.display='block';

  } else { // otherwise hide it or keep it hidden.

    el.style.display='none';
  }
}
function dss_addLoadEvent(fn) {
  if(typeof(fn)!="function")return;
  var tempFunc=window.onload;
  window.onload=function() {
    if(typeof(tempFunc)=="function")tempFunc();
    fn();
  }
}
dss_addLoadEvent(function() {
  // we find the form element and the select element and attach the event 
  // handlers to them
  var f = document.StrainReport;
  f.onsubmit = function(){return false;}
  var sel = f.medium_type;
  sel.onchange=function(){customOption(this.options[this.selectedIndex])}

  // we call the function when the page loads to hide #other1label initially
  sel.onchange();
});
// -->

 

and the box that corrasponds with that working function has the following code

 

			       <label>
<div class="cont">
<div class="label"><label for="medium_type"
><select name="medium_type" id="select1">
       <option name="medium_type" value="General Soil">General Soil</option>
				        <option name="medium_type" value="Option 1">Option 1</option>
                  <option name="medium_type" value="Option 2">Option 2</option>
			          <option name="medium_type" value="Option 3">Option 3</option>
				        <option name="medium_type" value="Option 4">Option 4</option>
				        <option name="medium_type" value="Option 5 ">Option 5 </option>
  <option value="customoption">Other...</option>
</select></label></div>
<div class="label" id="other1label"><label for="other1"
>Other: <input type="text" name="other1" id="other1"></label></div>
</div>

 

the seccodn funtion which doesn't work is

if(document.all && !document.getElementById) { //IE4 support
  document.getElementById = function(id) { return document.all[id]; }
}

/*

This works in Firefox, Netscape 6+, IE4+/Win, Opera 7+, Konqueror 3, Safari, 
IE5/Mac, and iCab 3.

*/
function customOption2(selected) { //selected is the selected option
  if(!document.getElementById) return;

  // selected's value property is retrieved and converted to lower case to make 
  // comparing it to another string simpler
  var val = selected.value.toLowerCase();

  // gets the object reference for the element
  var el = document.getElementById('other2label');
  
// if val is set to 'customoption2' show the textbox
  if(val == 'customoption2') {
    el.style.display='block';

  }else { // otherwise hide it or keep it hidden.

    el.style.display='none';
  }
}
function dss_addLoadEvent2 (fn) {
  if(typeof(fn)!="function")return;
  var tempFunc=window.onload;
  window.onload=function() {
    if(typeof(tempFunc)=="function")tempFunc();
    fn();
  }
}
dss_addLoadEvent2(function() {
  // we find the form element and the select element and attach the event 
  // handlers to them
  var f = document.StrainReport;
  f.onsubmit = function(){return false;}
  var sel = f.system_type;
  sel.onchange=function(){(this.options[this.selectedIndex])}

  // we call the function when the page loads to hide #other2label initially
  sel.onchange();
});
// -->

 

with the drop box code of

 

			       			       <label>
<div class="cont"
<div class="label"><label for="system_type"><select name="system_type" id="select2">
				        <option name="system_type" value="Option 1">Option 1</option>
                  <option name="system_type" value="Option 2">Option 2</option>
			          <option name="system_type" value="Option 3">Option 3</option>
				        <option name="system_type" value="Option 4">Option 4</option>
				        <option name="system_type" value="Option 5 ">Option 5 </option>
                <option value="customoption2" onselect="customOption2(selected)">Other...</option>
</select></label></div>
<div class="label" id="other2label"> <label for="other1" >
Other: <input type="text" name="other1" id="other1"></label></div>
</div>

 

 

I have been over and over the script and can't see what i'm doign wrong

 

would really apreaciate any help peopel can provide I have attached a copy of the full page so that you can easly look at the two together

 

thankyou again in advance to anyone that can help

 

 

 

 

 

 

 

[attachment deleted by admin]

[fenway]

That's a lot of code... what part specifically doesn't work?