Member Avatar for patk570

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
  • 217 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by patk570

Dani AI

Generated

Quick summary: shared a simple show/hide solution that uses onclick handlers on each <option>, and asked for the code. That approach often works, but it has a few gaps—option onclick handlers are unreliable across browsers and don’t cover keyboard selection or scripted changes. A more robust pattern is to listen for changes on the <select>, then show or hide the extra field based on the selected value, while also managing form submission and accessibility.

An example follows that avoids inline onclicks, disables the helper input when hidden (so it won’t be submitted accidentally), clears its value when hiding, and focuses it when shown:

<select id="referrerSelect" name="referrer">
  <option value="">Choose…</option>
  <option value="friend">Friend</option>
  <option value="other">Other</option>
  <option value="search">Search engine</option>
</select>

<input id="referrerOther" name="referrerOther" type="text" hidden />
document.addEventListener('DOMContentLoaded', function () {
  var sel = document.getElementById('referrerSelect');
  var other = document.getElementById('referrerOther');

  function sync() {
    var show = sel.value === 'friend' || sel.value === 'other';
    other.hidden = !show;           // HTML5 hidden attribute
    other.disabled = !show;         // prevents accidental submission
    other.required = show;          // optional: enforce client-side validation
    if (!show) other.value = '';    // clear stale input
    else other.focus();
  }

  sel.addEventListener('change', sync);
  sync(); // initial state
});

Troubleshooting notes and tips:

  • Inline option onclicks can miss keyboard selection; change-on-select covers all user actions.
  • For very old browsers without hidden, toggle a CSS class that applies display:none.
  • Server-side validation must still check that the “other” field is present only when expected.
  • If accessibility is a priority, add a linked <label> and update aria-hidden alongside hidden for screen-readers.

This keeps the behavior predictable, prevents accidental form submission of hidden fields, and is easier to maintain than multiple inline handlers.

Member Avatar for pritaeas

Care to share your solution, to help out others?

Member Avatar for patk570

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" />
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.