...

View Full Version : JS Function not working with multiple vars



YourDirector
07-23-2012, 12:13 PM
Hey everyone,

I'm very new to JS and am having some trouble with a function to hide and display elements of a form depending on the selection of an options input.

I'm currently trying the following:

<script type="text/JavaScript">
function Checktype(val){
var urlelement=document.getElementById('url');
var urltitleelement=document.getElementById('urltitle');


if(val=='video')
urlelement.style.display='block';
urltitleelement.style.display='block';

else
urlelement.style.display='none';
urltitleelement.style.display='none';

}



</script>

Which should display and hide two elements of the form depending on the selection of a drop-down options input. It works fine when I run it with just one element like this:

<script type="text/JavaScript">
function Checktype(val){
var urlelement=document.getElementById('url');


if(val=='video')
urlelement.style.display='block';

else
urlelement.style.display='none';

}



</script>

but I have 12 elements of the form I want to control like this in the function and as soon as I add a second it stops working. Where am I going wrong?

Thanks

YD

vwphillips
07-23-2012, 03:35 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
var Ary=[ ];
// field 0 = toggle inputs
// field 1 = close inputs
// field 2 = open inputs
Ary['srt']=[[],['ip1','ip2','ip3','ip4','ip5','ip6','ip7','ip8','ip9','ip10','ip11','ip12'],[]];
Ary['12']=[['ip1','ip2'],[],[]];
Ary['tom']=[[],['ip1','ip2'],[]];
Ary['joe']=[[],[],['ip1','ip2']];
Ary['joe1']=[['ip3','ip4'],['ip1','ip2'],[]];

function INPUTS(sel){
var frm=sel.form,ary=Ary[sel.value],ip,z0;
if (ary){
if (ary[0]){
for (z0=0;z0<ary[0].length;z0++){
ip=frm[ary[0][z0]];
if (ip){
ip.style.display=ip.style.display!='none'?'none':'inline';
}
}
}
if (ary[1]){
for (z0=0;z0<ary[1].length;z0++){
ip=frm[ary[1][z0]];
if (ip){
ip.style.display='none';
}
}
}
if (ary[2]){
for (z0=0;z0<ary[2].length;z0++){
ip=frm[ary[2][z0]];
if (ip){
ip.style.display='inline';
}
}
}
}
sel.selectedIndex=0;
}
/*]]>*/
</script></head>

<body>
<form>
<select id="sel" onchange="INPUTS(this);" >
<option value="srt" >Select</option>
<option value="12" >Toggle 1 & 2</option>
<option value="tom" >Close 1 & 2</option>
<option value="joe" >Open 1 & 2</option>
<option value="joe1" >Toggle 3 & 4 close 1 & 2</option>
</select>
<input type="text" name="ip1" value="input 1" /><br />
<input type="text" name="ip2" value="input 2" /><br />
<input type="text" name="ip3" value="input 3" /><br />
<input type="text" name="ip4" value="input 4" /><br />
<input type="text" name="ip5" value="input 5" /><br />
<input type="text" name="ip6" value="input 5" /><br />
<input type="text" name="ip7" value="input 7" /><br />
<input type="text" name="ip8" value="input 8" /><br />
<input type="text" name="ip9" value="input 9" /><br />
<input type="text" name="ip10" value="input 10" /><br />
<input type="text" name="ip11" value="input 11" /><br />
<input type="text" name="ip12" value="input 12" /><br />

</form>
<script type="text/javascript">
/*<![CDATA[*/
INPUTS(document.getElementById('sel'));
/*]]>*/
</script>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum