Entry
How to create a field that shows up only when a button is pushed?
Dec 4th, 2002 19:09
Ryan Buterbaugh, Martin Honnen, Michou Djifa,
It depends on the browser you target. With NN6 and IE4+ you can simply
use css to set either display to none or visibility to hidden and then
onclick of the button change that value; here is an example form:
<FORM NAME="formName">
Enter name:
<INPUT TYPE="text" NAME="userName">
<BR>
<INPUT TYPE="button" VALUE="click here if you are religious"
ONCLICK="var div = document.all ? document.all.formDiv :
document.getElementById ?
document.getElementById('formDiv') :
null;
if (div)
div.style.display = 'block';"
>
<DIV ID="formDiv" STYLE="display: none;">Enter your favourite GOD:
<INPUT TYPE="text" VALUE="Kibo" NAME="god">
</DIV>
<BR>
<INPUT TYPE="submit">
</FORM>
This solution however does not work with NN4. NN4 can not set the
display property of elements and can only set the visibility of
positioned elements (layers). Further complications arise as forms can
not be shared across layers. So you end up with a complete
reorganization of your page with a layer containing an extra form from
which you need to copy the value:
<HTML>
<HEAD>
<STYLE>
#formDiv {
position: relative; visibility: hidden;
}
</STYLE>
<SCRIPT>
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
Enter name:
<INPUT TYPE="text" NAME="userName">
<BR>
<INPUT TYPE="button" VALUE="click here if you are religious"
ONCLICK="if (document.all)
document.all.formDiv.style.visibility = 'visible';
else if (document.getElementById)
document.getElementById('formDiv').style.visibility
= 'visible';
else if (document.layers)
document.formDiv.visibility = 'show';"
>
<INPUT TYPE="hidden" NAME="god" VALUE="Kibo">
<BR>
<INPUT TYPE="submit">
</FORM>
<DIV ID="formDiv">
<FORM>
Enter your favourite GOD:
<INPUT TYPE="text" VALUE="Kibo" NAME="god"
ONCHANGE="document.formName.god.value = this.value;">
</FORM>
</DIV>
</BODY>
</HTML>
The above works with NN4+ and IE4+.
