0

I have a form that is very basic, I have 2 fields that call for the hidden input select using a basic JS, what I want to know is if there is a way to make it hide again when they select something different.

Here is my JS:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

here is my select and options:

<select name="referredby">
<option value="Facebook">Facebook</option>
<option value="Twitter">Twitter</option>
<option value="Angieslist">Angieslist</option>
<option value="Google">Google</option>
<option value="Bing">Bing</option>
<option onclick="toggle_visibility('otheroption2');" value="Friend">Friend</option>
<option onclick="toggle_visibility('otheroption2');" value="other">Other</option>
</select>
<br />
<input type="text" value="" name="otheroption2" id="otheroption2" style="display:none" />

Basically when they click on Facebook, Twitter, Angieslist, Google and Bing, I want that input to hide again.

2
Contributors
2
Replies
23
Views
4 Years
Discussion Span
Last Post by patk570
1

the js, very simple and easy.

<script type="text/javascript">
function hideMe()
{
document.getElementById('otheroption2').style.display="none" ;
}
</script>
 <script type="text/javascript">
function showMe()
{
document.getElementById('otheroption2').style.display="block" ;
}
</script>

the html

basic:

            <td><select name="referredby">
<option onclick="return hideMe();" value="Facebook">Facebook</option>
<option onclick="return hideMe();" value="Twitter">Twitter</option>
<option onclick="return hideMe();" value="Angie's List">Angie's List</option>
<option onclick="return hideMe();" value="Google">Google</option>
<option onclick="return hideMe();" value="Bing">Bing</option>
<option onclick="return showMe();"  value="Friend">Friend</option>
<option onclick="return showMe();" value="Other">Other</option>

</select><input type="text" value="Please Specify:" onclick="this.value='';" name="otheroption2" id="otheroption2" style="display:none" />
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.