A little helo with onChange Event

[hcdarkmage]

Ok, it has been a while, but I am having a problem with some JavaScript. I can't locate the head and body tags, because the script is all template based. I have a function that is supposed to show some extra options when a selection is made from the drop down list, but it isn't working properly. Hopefully we can come to a solution together.

 

This is the code that has the drop down and the function call:

 

<tr><td valign=top width=28%><? echo $lang['contactform']['fieldtext'] ?></td>
<td colspan=3><input type=text name=fieldtext id=fieldtext style="width:265px" value="<? echo $fieldtext ?>"> *</td></tr>
<tr><td valign=top width=28%><? echo $lang['contactform']['fieldtype'] ?></td>
<td colspan=3>
<select name="fieldtype" id="fieldtype" onChange="toggledisplaymode(this.options[this.selectedIndex].value)">
	<option value="textbox" <? echo $fieldtype=="textbox"?"selected":"" ?>><? echo $lang['contactform']['textbox'] ?></option>
	<option value="drop" <? echo $fieldtype=="drop"?"selected":"" ?>><? echo $lang['contactform']['dropdownselection'] ?></option>
	<option value="checkbox" <? echo $fieldtype=="checkbox"?"selected":"" ?>><? echo $lang['contactform']['checkbox'] ?></option>
	<option value="radio" <? echo $fieldtype=="radio"?"selected":"" ?>><? echo $lang['contactform']['radiobutton'] ?></option>
	<option value="textarea" <? echo $fieldtype=="textarea"?"selected":"" ?>><? echo $lang['contactform']['textarea'] ?></option>
</select></td></tr>
<tr><td valign=top><? echo $lang['contactform']['fieldwidth'] ?></td><td><input type=textbox name=fieldwidth style="width:60px" value="<? echo $fieldwidth?$fieldwidth:"200" ?>"> px</td>
<td valign=top id=tbdataHeight1 style="display:none"><? echo $lang['contactform']['fieldheight'] ?></td><td id=tbdataHeight2 style="display:none"><input type=textbox name=fieldheight style="width:60px" value="<? echo $fieldheight?$fieldheight:"50" ?>"> px</td></tr>

<tr><td colspan=3>
<table id=tbrowOption style="display:none" border=0 cellpadding=0 cellspacing=0 width=98%>
<tr><td > blah blah text </td></tr>
</table>
</td></tr>

 

And this is the function code:

<script language=javascript>
function toggledisplaymode(selectType){

if (selectType=="drop"){
	tbrowOption.style.display = "block";
	tbdataHeight1.style.display = "none";
    tbdataHeight2.style.display = "none";
}else if(selectType=="textarea"){
	tbrowOption.style.display = "none";
	tbdataHeight1.style.display = "block";
     tbdataHeight2.style.display = "block";
}else{
	tbrowOption.style.display = "none";
	tbdataHeight1.style.display = "none";
     tbdataHeight2.style.display = "none";
}

}
</script>

 

There are other options for the if, but for now I am just trying to get it to work with the one.

 

And I am sorry for the messy code, I didn't write it, just trying to fix it.

 

Any help would be appreciated.

[hcdarkmage]

*bump*

[XeNoMoRpH1030]

My guess is that JavaScript has no clue what tbrowOption, tbdataHeight1, and tbdataHeight2 are. You can try the below code.

 

<script language=javascript>
function toggledisplaymode(selectType){
var tbrowOption = document.getElementById('tbrowOption');
var tbdataHeight1= document.getElementById('tbdataHeight1');
var tbdataHeight2= document.getElementById('tbdataHeight2');
if (selectType=="drop"){
	tbrowOption.style.display = "block";
	tbdataHeight1.style.display = "none";
    tbdataHeight2.style.display = "none";
}else if(selectType=="textarea"){
	tbrowOption.style.display = "none";
	tbdataHeight1.style.display = "block";
     tbdataHeight2.style.display = "block";
}else{
	tbrowOption.style.display = "none";
	tbdataHeight1.style.display = "none";
     tbdataHeight2.style.display = "none";
}

}
</script>

 

Hiding table columns can be tricky though, from my experience. What is it supposed to do when "working properly"?

[hcdarkmage]

Hiding table columns can be tricky though, from my experience. What is it supposed to do when "working properly"?

 

When working properly it hides 2 options that won't be needed when you select a drop down box, radio buttons, or check boxes,. but shows options for what text could be put with those options.

 

Just tested the code, and it works to a degree. At least the hidden field is shown. Now I need to get it to hide the others.

 

EDIT Actually, apparently that did the trick. Thank you very much.