[RESOLVED] Javascript hiding form sections problem.

The-Master

OK I want the section with id custom hidden when it anything is selected other than custom. It starts off hidden but then it goes visible when I click custom which is good but then when I go back to anything else the section remains. How would I sort this?

<form name="FileSearch" action="search.php" method="post"><label for="Search">File Name: </label><input type="text" id="Search" name="Search"/>  <label><br />
File Type:
  <select name="type" id="type">
    <option selected="selected" onclick="javascript:document.FileSearch.Custom.type=hidden">MP3</option>

<option onclick="javascript:document.FileSearch.Custom.type=hidden">Zip</option>
<option onclick="javascript:document.FileSearch.Custom.type=hidden">Rar</option>
   <option onclick="javascript:document.FileSearch.Custom.type=text">Custom</option>
  </select>
  </label>
  <p>
    <input size="10" type="hidden" id="Custom" name="Custom"/>

  </p>
  <p>
    <input type="submit" name="Submit" value="Submit"/>
  </p>
</form>

jazz_snob

i think you need <select onchange="callsomefunction()"...

that way you can look at which option was selected so you can show/hide whatever elements you need to

dougal85

'lo fellow Scotsman!

Got to say I'm finding it hard to understand what you want to do.

When the select a check box you want to show something that was previously hidden. What do you want to trigger it going invisible again?

The-Master

Hi. Nice to see someone else from Scotland!

I got it fixed by doing this. It is not the neatest code ever but it will do:

<html><head><script language="javascript"> function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
</script></head><body>



            <script type="text/javascript">
            function hide(){
            document.FileSearch.Custom.type='hidden';}
            </script>
            <script type="text/javascript">
            function show(){
            document.FileSearch.Custom.type='text';}
            </script>

<form name="FileSearch" action="search.php" method="post"><label for="Search"><font color="white">File Name: </label><input type="text" id="Search" name="Search">  <label>File Type: </font>

 <select name="type" onChange="MM_jumpMenu('parent',this,0)" id="type">

<option selected="selected" value="javascript:hide(); //MP3;">MP3</option>
<option value="javascript:hide(); //Zip;">Zip</option>
<option value="javascript:hide(); //Rar;">Rar</option>
<option value="javascript:show(); //Custom">Custom</option>
</select>

  </label><input size="10" type="hidden" id="Custom" name="Custom"> <input type="submit" name="Submit" value="Submit"></form>

</body>
</html>

Pretty untidy but it works the way I want it too. For some reason it didn't like changing the form element type.