Hiding fields in a form

To hide or show form fields according to the value of an existing form field

The form below shows three field types that can be used to display (or hide) other form elements. The form is incomplete in so far as the <form> tag has no action or method attributes, and the submit button will not submit the form.

In each section, a text box with associated label is hidden using a <div> with CSS style display: none;. When the text box is to be displayed, the style is changed to
display: block;. The effective code for the <div> (in its hidden state) is:

<div id="someId" style="display:none;width:400px;padding:0;margin:0;">
some text: <input type="text" size="20" />
</div>

All the examples use the following JavaScript, which should be placed in the <head> section of the page, or in a linked external javascript file.

<script type="text/javascript">

function FP_changeProp() {//v1.0
var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o"; 
ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) { 
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
</script>

Note that in this page the form below is part of the first (and only) form on the page, and is referred to in the scripts as forms[0]

Radio Choices

This section uses radio buttons to show/hide the hidden form elements. Choice 1 leaves the extra form elements hidden, whereas choice 2 will display the hidden elements.

An onclick event on each radio either hides or shows the additional text box, using the Change Property behaviour in Expression Web or FrontPage 2003.

Choice 1	Choice 2
Name:

Radio Choices - The Code:

<table border="0" cellpadding="4" cellspacing="0">
<tbody>
<tr>
<td class="txt10l"><input checked="" class="radio" name="R1" onclick="FP_changeProp(/*id*/'rd1',0,'style.display','none')" type="radio" value="V2" />Choice 1</td>
<td class="txt10l"><input class="radio" name="R1" onclick="FP_changeProp(/*id*/'rd1',0,'style.display','block')" type="radio" value="V1" />Choice 2</td>
</tr>
<tr>
<td colspan="2">
<div id="rd1" style="display: none; padding: 0; margin: 0; width: 400px;">
<p>Name: <input class="inp" name="T1" size="20" type="text" /></p>
</div>
</td>
</tr>
</tbody>
</table>

Check Box

This section uses a checkbox to determine if the textbox should be shown. If the checkbox is ticked, the textbox is shown, if cleared the textbox is hidden. A JavaScript function is called using an onchange event on the checkbox. The function determines if the checkbox is checked or not, and shows or hides the textbox accordingly.

I do not agree to T & C

Check Box - The Code:

<script type="text/javascript">
function cbvis() {
var vis;
if (document.forms[0].C1.checked) vis = "block";
else vis = "none";
FP_changeProp(/*id*/'cb1',0,'style.display',vis);
}
</script>

<p><input id="C1" name="C1" onclick="cbvis()" type="checkbox" value="Agreed" />I do not agree to T &amp; C</p>
<div id="cb1" style="display: none; padding: 0; margin: 0; width: 400px;">
<p>Why not? <input class="inp" name="T2" size="20" type="text" /></p>
</div>

Dropdown Option Box

This section utilises a dropdown selection box to determine if the hidden form elements should be shown. A JavaScript function is called by an onchange event, which looks at which item selected in the dropdown, and shows/hides the textbox accordingly. In this example, the first item in the dropdown list hides the checkbox, all other items display it.

Dropdown Options - The Code:

<script type="text/javascript">
function dpdn(ee) {
var vis;
if (document.forms[0].D1.selectedIndex >= 1) vis = "block";
else vis = "none";
FP_changeProp(/*id*/'dpd',0,'style.display',vis);
}
</script>

<p>
<select id="D1" name="D1" onchange="dpdn(this)" size="1">
<option selected="" value="Windows">Windows</option>
<option value="Unix">Unix</option>
<option value="BeOS">BeOS</option>
</select> 
</p>
<div id="dpd" style="display: none; padding: 0; margin: 0; width: 400px;">
<p>Why not use Windows? <input class="inp" name="T3" size="20" type="text" /></p>
</div>

Both the above buttons reset the form fields and hide any exposed "hidden" fields.

Show or Hide form fields using layers

Related Pages