Andrew Clark wrote:
hello,
i am trying to create a login page to my website. there are the usual
fields for name and password, but i want 2 more: a checkbox that a new user
will check, and then another text input that will appear if the box is
checked. is it possible to have this happen dynamically? i.e. the 2nd
password box will appear if it is checked, but it will disappear if it is
unchecked. thanks
andrew
<body onload="setVisibility('additionalInfoId', false);">
<form name="loginForm">
<input type="text" name="userName" id="userNameId" />
<input type="password" name="userPass" id="userPassId" />
<input type="checkbox" name="newUser" id="newUserId"
onclick="toggleVisibility(this);" />
<input type="text" name="additionalInfo" id="additionalInfoId" />
</form>
<script type="text/javascript">
function isDefined(item) {
return (typeof item != 'undefined');
}
function setVisibility(elementId, displayState) {
if (document.getElementById) {
var element = document.getElementById(elementId);
if (element && isDefined(element.style) &&
isDefined(element.style.display)) {
if (displayState) {
element.style.display = 'inline';
} else {
element.style.display = 'none';
}
}
}
}
function toggleVisibility(chkbox) {
var id = chkbox.form.additionalInfo.id;
setVisibility(id, chkbox.checked);
}
</script>
Works in Netscape 4.x and Opera 6.05 (by simply keeping the input element
visible all the time), IE6SP1, Mozilla and Opera 7.11 (by toggling the
visibility of the input element).
By starting the display style in the default state (in this case 'inline') and
turning it off only when the browser is capable of doing so, you've guaranteed
that the input element will only be set to display 'none' in browsers that are
capable of turning it back on again.
It's coded specific to 'inline' elements, you could make it more generic to
handle both 'block' and 'inline' elements by passing that rather then a
boolean. In fact, you could pass both a style property and it's value and make
it even more generic:
function setStyle(id, styleProperty, styleValue) {
if (document.getElementById) {
var element = document.getElementById(id);
if (element && isDefined(element.style) &&
isDefined(element[styleProperty])) {
element[styleProperty] = styleValue;
}
}
}
--
| Grant Wagner <gw*****@agricoreunited.com>
* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html
* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_entry.asp
* Netscape 6/7 DOM Reference available at:
*
http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
*
http://www.mozilla.org/docs/web-deve...upgrade_2.html 
