select value from drop down box

[wysiwygGER01]

Hi,

I think I got a very basic question but can't work it out.

I have a drop down box. By selecting a value from the drop down list I'd like to hide one part of my form and show another part.
The code for collapsing and expanding my form works great when using static values but I can't get it to work together with the value I'm selecting from the drop down list.

<SCRIPT type=text/javascript>
<!--
function collapseElem(obj)
{
var el = document.getElementById(obj);
el.style.display = 'none';
}

function expandElem(obj)
{
var el = document.getElementById(obj);
el.style.display = '';
}
//-->
</SCRIPT>


<ul class=mainForm id="mainForm_2">
<li class="mainForm" id="fieldBox_6">
<select class=mainForm name=field_6 id=field_6 onchange="collapseElem('mainForm_2'); expandElem(mainForm_2.field_6.options[mainForm_2.field_6.selectedIndex].value);">
<option selected></option>
<option value="mainForm_3">Management</option>
<option value="mainForm_4">Engineering</option>
<option value="mainForm_5">Operations </option>
</select>
</li>
</ul>



If I change the onchange attribute to the below it will work.
onchange="collapseElem('mainForm_2');expandElem('mainForm_3');"

 

[feherke]

Hi

That looks horrible and is certainly incomplete.

Show us the [tt]form[/tt] including all elements to toggle and enumerate the rules of toggling.

( The best would be an URL to a publicly accessible version of that page, but posting the HTML here is also fine. )

Feherke.

http://rootshell.be/~feherke/

 

[wysiwygGER01]

Hi,

thank you for your quick reply.
All I'm after is finding a way to replace the static 'mainForm_3' with whichever value I select from the drop down list.

<form method=post enctype=multipart/form-data action=processor.php onSubmit="return validatePage3();">
<ul class=mainForm id="mainForm_1">
<li class="mainForm" id="fieldBox_1">
<input class=mainForm type=text name=field_1 id=field_1 size='20' value=''>
</li>
<!-- end of this page -->
<!-- next page buttons -->
<li class="mainForm">
<input type=button onclick=" collapseElem('mainForm_1'); expandElem('mainForm_2');" class="mainForm" value="Go to page 2"/>
</li>
<!-- close the display stuff for this page -->
</ul>
<ul class=mainForm id="mainForm_2">
<li class="mainForm" id="fieldBox_6">
<select class=mainForm name=field_6 id=field_6 onchange="collapseElem('mainForm_2'); expandElem('mainForm_3');">
<option selected></option>
<option value="mainForm_3">Management</option>
<option value="mainForm_4">Engineering</option>
<option value="mainForm_5">Operations and Maintenance</option>
</select>
</li>
<!-- end of this page -->
</ul>
<ul class=mainForm id="mainForm_3">
<li class="mainForm" id="fieldBox_8">
<label class="formFieldQuestion">Question</label>
<input class=mainForm type=checkbox name=field_8[] id=field_8_option_1 value="answer" />
<label class=formFieldOption for="field_8_option_1">answer</label>
</li>
<!-- end of this page -->
</form>

 

[feherke]

Hi

I still not understand what you want. You posted just another incomplete code with unclear rules. You will have to wait for someone capable to get some meaning from that.

In meantime my best guess is this :

function ch(what)
{
  for (var i=0,l=what.options.length;i<l;i++)
    if (what.options[i].value)
      document.getElementById(what.options[i].value).style.display=i==what.selectedIndex?'block':'none'
}

<form action="">

<ul id="mainForm_1"><li>One</li></ul>

<select onchange="ch(this)">
<option selected="selected"></option>
<option value="mainForm_3">Management</option>
<option value="mainForm_4">Engineering</option>
<option value="mainForm_5">Operations and Maintenance</option>
</select>

<ul id="mainForm_3"><li>Three</li></ul>
<ul id="mainForm_4"><li>Four</li></ul>
<ul id="mainForm_5"><li>Five</li></ul>

</form>

Feherke.

http://rootshell.be/~feherke/