»
EnglishFrenchVietnamese

Print - Toggle Additional Info - JavaScriptBank.com

Full version: jsB@nk » Form » Checkbox » Toggle Additional Info
URL: https://www.javascriptbank.com/toggle-additional-info.html

Toggle Additional Info © JavaScriptBank.comAdd 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.

Full version: jsB@nk » Form » Checkbox » Toggle Additional Info
URL: https://www.javascriptbank.com/toggle-additional-info.html



JavaScript
<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>


HTML
<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>