javascript in forms

**szar** · Jul 20 '05, 10:25 AM

Re: javascript in forms

"Andrew Clark" <lark047@hotmai l.com> wrote in message
news:Xns93F3DA9 999B2B0x120@208 .33.61.211...[color=blue]
> *** post for FREE via your newsreader at post.newsfeed.c om ***
>
> 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[/color]
user[color=blue]
> 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
>
>
> -----= Posted via Newsfeed.Com, Uncensored Usenet News =-----
> http://www.newsfeed.com - The #1 Newsgroup Service in the World!
> -----== 100,000 Groups! - 19 Servers! - Unlimited Download! =-----
>[/color]

Andrew, I know you could have a layer hidden and show it upon clicking the
checkbox, but I've seen this done on other sites and think there may be a
better way. But for this way just create a layer with it's visibility
default set to hidden, and on you checkbox add an onclick event that passes
it's value (checked or not) to a function that will show or hide the layer
based on it. That'll get the job done but I'd wait for someone with more
experience with this to post something. Hopefully they do cause I'm going to
use it too.

**john** · Jul 20 '05, 10:26 AM

Re: javascript in forms

Try this:

<html>
<head>

<style>
..showBoxOff {border: solid 0px #000000; width: 100px;
visibility:hidd en;}
..showBox {border: solid 0px #000000; width: 200px; paddig: 10px;
visibility:visi ble;}
</style>

<script language="JavaS cript">
function validate() {

if (document.login Form.newUserBox .checked)
document.all.ne wUser.className ="showBox"

else
document.all.ne wUser.className ="showBoxOff "

}
</script>
</head>

<body>

<form name="loginForm ">
username: <input type="text" name="user"><br >
password: <input type="password" name="pass"><br >
new user: <input type="checkbox" name="newUserBo x"
onClick="valida te()">
</form>

<div class="showBoxO ff" id="newUser">

<form>
new field: <input type="text">
</form>
</div>

</body>
</html>

**Grant Wagner** · Jul 20 '05, 10:27 AM

Re: javascript in forms

Andrew Clark wrote:
[color=blue]
> 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[/color]

<body onload="setVisi bility('additio nalInfoId', 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="toggle Visibility(this );" />
<input type="text" name="additiona lInfo" id="additionalI nfoId" />
</form>
<script type="text/javascript">
function isDefined(item) {
return (typeof item != 'undefined');
}
function setVisibility(e lementId, displayState) {
if (document.getEl ementById) {
var element = document.getEle mentById(elemen tId);
if (element && isDefined(eleme nt.style) &&
isDefined(eleme nt.style.displa y)) {
if (displayState) {
element.style.d isplay = 'inline';
} else {
element.style.d isplay = 'none';
}
}
}
}
function toggleVisibilit y(chkbox) {
var id = chkbox.form.add itionalInfo.id;
setVisibility(i d, 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.getEl ementById) {
var element = document.getEle mentById(id);
if (element && isDefined(eleme nt.style) &&
isDefined(eleme nt[styleProperty])) {
element[styleProperty] = styleValue;
}
}
}

--
| Grant Wagner <gwagner@agrico reunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*

http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*

Microsoft Learn: Build skills that open doors in your career

http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

Gain technical skills through documentation and training, earn certifications and connect with the community

* 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

**Andrew Clark** · Jul 20 '05, 10:27 AM

Re: javascript in forms

*** post for FREE via your newsreader at post.newsfeed.c om ***

Grant Wagner <gwagner@agrico reunited.com> wrote in
news:3F61FFCF.A 6F5BB79@agricor eunited.com:
[color=blue]
> Andrew Clark wrote:
>[color=green]
>> 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[/color]
>
> <body onload="setVisi bility('additio nalInfoId', 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="toggle Visibility(this );" />
> <input type="text" name="additiona lInfo" id="additionalI nfoId" />
> </form>
> <script type="text/javascript">
> function isDefined(item) {
> return (typeof item != 'undefined');
> }
> function setVisibility(e lementId, displayState) {
> if (document.getEl ementById) {
> var element = document.getEle mentById(elemen tId);
> if (element && isDefined(eleme nt.style) &&
> isDefined(eleme nt.style.displa y)) {
> if (displayState) {
> element.style.d isplay = 'inline';
> } else {
> element.style.d isplay = 'none';
> }
> }
> }
> }
> function toggleVisibilit y(chkbox) {
> var id = chkbox.form.add itionalInfo.id;
> setVisibility(i d, 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.getEl ementById) {
> var element = document.getEle mentById(id);
> if (element && isDefined(eleme nt.style) &&
> isDefined(eleme nt[styleProperty])) {
> element[styleProperty] = styleValue;
> }
> }
> }
>
> --
>| Grant Wagner <gwagner@agrico reunited.com>
>
> * Client-side Javascript and Netscape 4 DOM Reference available at:
> *
> http://devedge.netscape.com/library/...pt/1.3/referen
> ce/frames.html
>
> * Internet Explorer DOM Reference available at:
> *
> http://msdn.microsoft.com/workshop/a.../dhtml_referen
> ce_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
>
>[/color]

thanks! this is exactly what i'm looking for.

andrew

-----= Posted via Newsfeed.Com, Uncensored Usenet News =-----
http://www.newsfeed.com - The #1 Newsgroup Service in the World!
-----== 100,000 Groups! - 19 Servers! - Unlimited Download! =-----

javascript in forms

javascript in forms

Comment

Comment

Comment

Comment