« »

Add this snippet switch toggle into your forms when you need additional information but don't want to display the input boxes unless it is necessary. Easy to implement and expand.

Label: toggle, info, snippet, form, switch toggle, implement, input boxes, expand

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript">
<!--
// Created by Anonymous - http://javascript.internet.com/

function toggleMe(obj, a){
  var e=document.getElementById(a);
  if(!e)return true;
    e.style.display="block"
  return true;
}

function toggleMe2(obj, a){
  var e=document.getElementById(a);
  if(!e)return true;
    e.style.display="none"
  return true;
}
//-->
</script>

Copy All x2

<form name="theForm">
  Are you married?<br>
  <input name="married" value="yes" onclick="return toggleMe(this, 'marriedInfo')" type="radio" checked> Yes
  <input name="married" value="no" onclick="return toggleMe2(this, 'marriedInfo')" type="radio"> No<br>
  <div id="marriedInfo" style="display: block; margin-left: 20px;">
    <table>
      <tbody><tr>
        <td>Spouse's name:</td>
        <td style="text-align: right;"><input name="name" type="text"></td>
      </tr><tr>
        <td>Spouse's Date of Birth:</td>
        <td style="text-align: right;"><input name="bday" type="text"></td>
      </tr><tr>
        <td>Spouse's Birth Place:</td>
        <td style="text-align: right;"><input name="bplace" type="text"></td>
      </tr>
    </tbody></table>
  </div>
</form>