Full version: jsB@nk » Form » Checkbox » Toggle Additional Info
URL: https://www.javascriptbank.com/toggle-additional-info.html
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.
Full version: jsB@nk » Form » Checkbox » Toggle Additional Info
URL: https://www.javascriptbank.com/toggle-additional-info.html
<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>
<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>