Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library


Category: Javascript Codes Library >> Forms, Radio, Buttons, Check Box >> Toggle Additional Form Elements

Code Snippet </> Info

Snippet Name: Toggle Additional Form Elements

Description: This script will hide/show form field elements depending on the visitor input response.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo


Author: SnapBuilder <>

Last Modified: 2015-08-26 23:05:37

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor

  About Copying
Copied To Clipboard!

<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 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;"block" return true; } function toggleMe2(obj, a){ var e=document.getElementById(a); if(!e)return true;"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="">Toggle Additional Form Elements</a> page. ] </div> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library