Entry
How can I hide form elements?
How can I hide form elements?
Feb 21st, 2000 09:14
Martin Honnen,
With NN6 and IE4/5 you can just set
elementReference.style.visibility = 'hidden'
to hide a page element including a form element and
elementReference.style.visibility = 'visible'
to show it again.
NN4 is more difficult as
- only positioned elements can be hidden
- positioned elements have their own documents forcing you to
partition your form into several ones one for each portion to be
hidden separately
So if you want to hide/show form elements with NN4 break your form
apart into separate forms you want to hide separately, wrap the
separate forms each into a SPAN to which you apply relative or absolute
positioning and then write the code to show/hide the SPANs.
Here is an example:
<HTML>
<HEAD>
<STYLE>
.hideable { position: relative; visibility: visible; }
</STYLE>
<SCRIPT>
function hideShowGods(hide) {
if (document.layers)
document.godContainer.visibility = hide ? 'hide' : 'show';
else {
var g = document.all ? document.all.godContainer :
document.getElementById('godContainer');
g.style.visibility = hide ? 'hidden' : 'visible';
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD VALIGN="top">
<FORM NAME="form0">
Atheist?
<INPUT TYPE="checkbox" NAME="atheist"
ONCLICK="hideShowGods(this.checked);"
>
</FORM>
</TD>
<TD>
<SPAN ID="godContainer" CLASS="hideable">
<FORM NAME="form1">
<SELECT NAME="gods">
<OPTION>Select your GOD
<OPTION VALUE="He who greps">Kibo
<OPTION VALUE="He who xgreps">Xibo
<OPTION VALUE="He who leaps">Jehovah
</SELECT>
</FORM>
</SPAN>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Further work is needed if you want to submit form data as then you have
to collect the data from the different forms into hidden fields of
another form:
<HTML>
<HEAD>
<STYLE>
.hideable { position: relative; visibility: visible; }
</STYLE>
<SCRIPT>
function hideShowGods(hide) {
if (document.layers)
document.godContainer.visibility = hide ? 'hide' : 'show';
else {
var g = document.all ? document.all.godContainer :
document.getElementById('godContainer');
g.style.visibility = hide ? 'hidden' : 'visible';
}
}
function collectData () {
var atheist = document.form0.atheist.checked;
var gods = document.layers ?
document.godContainer.document.form1.gods :
document.form1.gods;
god = gods.options[gods.selectedIndex].value;
document.form2.atheist.value = atheist;
document.form2.gods.value = god;
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD VALIGN="top">
<FORM NAME="form0">
Atheist?
<INPUT TYPE="checkbox" NAME="atheist"
ONCLICK="hideShowGods(this.checked);"
>
</FORM>
</TD>
<TD>
<SPAN ID="godContainer" CLASS="hideable">
<FORM NAME="form1">
<SELECT NAME="gods">
<OPTION VALUE="nobody">Select your GOD
<OPTION VALUE="He who greps">Kibo
<OPTION VALUE="He who xgreps">Xibo
<OPTION VALUE="He who leaps">Jehovah
</SELECT>
</FORM>
</SPAN>
</TD>
</TR>
</TABLE>
<FORM NAME="form2" ACTION="whatever"
ONSUBMIT="collectData(); return true;"
>
<INPUT TYPE="hidden" NAME="atheist" VALUE="">
<INPUT TYPE="hidden" NAME="gods" VALUE="">
<INPUT TYPE="SUBMIT">
</FORM>
</BODY>
</HTML>
