Compatible Browsers:
Example: View Code Demo
<html>
<head>
<title>Toggle Additional Form Elements Javascript Code Snippet</title>
<script>
<!--
/* Begin Toggle Additional Form Elements
== This Script Free To Use Providing This Notice Remains ==
== This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library ==
== NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply ==
== Creative Commons License ==
*/
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>
</head>
<body>
<p>This script will hide form field elements depending on the visitor input response.</p>
<p>This is a great way to keep your visible form field elements to a minimum.</p>
<table cellpadding="4" cellspacing="4">
<tr>
<td><strong>Example: </strong> <form name="theForm"> Have you attended college?<br />
<input type="radio" name="response" value="yes" onclick="return toggleMe(this, 'SnapInfo')"> Yes
<input type="radio" name="response" value="no" onclick="return toggleMe2(this, 'SnapInfo')"> No<br />
<div id="SnapInfo" style="display: none; margin-left: 20px;">
<table>
<tr>
<td>College Name:</td>
<td style="text-align: right;"><input name="college_name" type="text"></td>
</tr>
<tr>
<td>Years Attended:</td>
<td style="text-align: right;"><input name="years_attended" type="text"></td>
</tr>
<tr>
<td>Degree:</td>
<td style="text-align: right;"><input name="degree" type="text"></td>
</tr>
</table>
</div>
</form>
</td>
</tr>
</table>
<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_66.html">Toggle Additional Form Elements</a> page. ]
</div>
</body>
</html>