How to hide/show an HTML form element depending on a combo box choice

Programming, JavaScript

This is an example of how you can show/hide an HTML form element depending on a combo box choice.

Put the following JavaScript code between your <head></head> section (or within a .js file if you prefer).

  
<script language="javascript" type="text/javascript">
  function hide() {
    var text = document.formName.textBox;
    if(document.formName.combo.value == "hide") {
      text.style.visibility = "hidden";
    }
    else {
      text.style.visibility = "visible";
    }
  }
</script>

The following snippet of code instead is the HTML code to use to call the hide function.

  
<form name="formName">
  <select name="combo" onchange="hide()">
    <option value="show">show</option>
    <option value="hide">hide</option>
  </select>
  <input type="text" name="textBox" id="textBox" />
</form>

It is very simple. When you choose hide the textbox disappears. If you choose show it appears.