[SOLVED] Hide a text box on drop-down selection

[Yesideez]

Hi, I've got a form that allows the user to enter some data about a movie.

 

I have a few drop-down selection boxes that are populated from the database however the last option in all of them has the value "999" when "Other" is selected. Is there is a way to use Javascript that when "other" is selected a text box appears (from hidden status) and when anything else is selected the text box appears? I need the "other" text box to be hidden on default - is this possible?

 

Here is a sample line of HTML for one of the drop-down boxes:

<tr><td>Release</td><td>: </td><td><select name="selrelease" class="gadtext"><?=$selreleases?><option value="999">Other >>></option></select> <input type="text" name="strrelease" value="" maxlength="40" size="30" class="gadtext" /></td></tr>

 

If anyone is able to post some sample Javascript along with how it would be used or knows of a link to a tutorial or script it'd extremely appreciated.

 

My knowledge of Javascript is barely minimal, many thanks!

[fenway]

You need to have an onchange event handler that sets the display attribute of the other DOM element to "none".

[Yesideez]

You need to have an onchange event handler that sets the display attribute of the other DOM element to "none".

Thanks for that but any examples you can point me in the right direction please?

 

As I said, my knowledge of Javascript is practically nil.

 

I'm not asking anyone to write the code for me, just examples of how I add the event and what on earth a DOM is and general stuff like that.

[Yesideez]

I've written this:

  <script type="text/javascript">
    function checkHide(x,strgad) {
      var opt=document.getElementById(x).value;
      var gad=document.getElementById(strgad);
      if (opt=="999") {gad.value="other";} else {gad.value="moo";}
    }
  </script>

With this being the new HTML:

<tr><td>Audio</td><td>: </td><td><select name="selaudio" id="selaudioid" onchange="checkHide(this.id,straudioid)" class="gadtext"><option value="1">Unknown</option><option value="1">MPEG Layer-3 Decoder</option><option value="2">AVI</option><option value="3">DivX</option><option value="4">WMV</option><option value="5">MOV</option><option value="6">MP4</option><option value="999">Other >>></option></select> <input type="text" name="straudio" id="straudioid" value="" maxlength="40" size="30" class="gadtext" /></td></tr>

I get an error - I've no idea why :/

[Yesideez]

OK here is the final code for those wanting to know what I have achieved...

  <script type="text/javascript">
    function checkHide(selgad,strgad) {
      var opt=document.getElementById(selgad).value;
      var strgad2=document.getElementById(strgad);
      if (opt=="999") {strgad2.style.visibility='visible'} else {strgad2.style.visibility='hidden'}
    }
  </script>

This is the HTML...

<tr><td>Audio</td><td>: </td><td><select name="selaudio" id="selaudioid" onchange="checkHide(this.id,'straudioid')" class="gadtext"><option value="1">Unknown</option><option value="1">MPEG Layer-3 Decoder</option><option value="2">AVI</option><option value="3">DivX</option><option value="4">WMV</option><option value="5">MOV</option><option value="6">MP4</option><option value="999">Other >>></option></select> <input type="text" name="straudio" id="straudioid" value="" maxlength="40" size="30" class="gadtext" style="visibility: hidden" /></td></tr>

On loading the page the text gadget is hidden and stays hidden when anything other than "other" is selected in the select gadget. If "other" is selected the text gadget is shown. Select anything else again and it disappears.