Show Field When Check Box Is Checked - Javascript

Some Girl wrote:
> I have a simple form that has one check box, an done text box. I'd
> like the contents of the box to be hidden, but made visible if the
> check box is checked.
> Here's a snippet of code:
>
> <form name="Form1" method="post">
> <input name="View1" type="checkbox"><br>
> <input name="View2" value="someanswer" type="hidden">
> </form>
> </script language="JavaScript">
> if (document.Form1.View1.checked)
> {
> document.Form1.View2.style.visibility="visible";
> }
> </script>

Use more accessible JavaScript and *understand* the markup you are
using. INPUT of type "hidden" does not hide an input. It creates a
hidden INPUT.

<input type="text" name="View2" style="visibility: hidden;" />
<!-- note the "style" attribute that specifies the visibility. -->

var v1 = document.forms['Form1'].elements['View1'];
var v2 = document.forms['Form1'].elements['View2'];
if (v1.checked) v2.style.visibility = 'visible';

Also, you realize, without encapsulating this in a function, the script
will always run inline, and never make "v2" visible. Put it in a
function, then fire it when "v1" is toggled, or by some other means call
it. (That may be what you meant your problem was.)

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

-Lost wrote on 04 jul 2007 in comp.lang.javascript:

> Some Girl wrote:
>> I have a simple form that has one check box, an done text box. I'd
>> like the contents of the box to be hidden, but made visible if the
>> check box is checked.
>> Here's a snippet of code:
>>
>> <form name="Form1" method="post">
>> <input name="View1" type="checkbox"><br>
>> <input name="View2" value="someanswer" type="hidden">
>> </form>
>> </script language="JavaScript">
>> if (document.Form1.View1.checked)
>> {
>> document.Form1.View2.style.visibility="visible";
>> }
>> </script>
>
> Use more accessible JavaScript and *understand* the markup you are
> using. INPUT of type "hidden" does not hide an input. It creates a
> hidden INPUT.
>
> <input type="text" name="View2" style="visibility: hidden;" />
> <!-- note the "style" attribute that specifies the visibility. -->
>
> var v1 = document.forms['Form1'].elements['View1'];
> var v2 = document.forms['Form1'].elements['View2'];

> if (v1.checked) v2.style.visibility = 'visible';

v2.style.visibility = (v1.checked) ?'visible' :'hiddden';

>
> Also, you realize, without encapsulating this in a function, the
> script will always run inline, and never make "v2" visible. Put it in
> a function, then fire it when "v1" is toggled, or by some other means
> call it. (That may be what you meant your problem was.)
>



--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

On Jul 4, 3:57 am, "Evertjan." <exjxw.hannivo...@interxnl.net> wrote:
> -Lost wrote on 04 jul 2007 in comp.lang.javascript:
>
>
>
> > Some Girl wrote:
> >> I have a simple form that has one check box, an done text box. I'd
> >> like the contents of the box to be hidden, but made visible if the
> >> check box is checked.
> >> Here's a snippet of code:
>
> >> <form name="Form1" method="post">
> >> <input name="View1" type="checkbox"><br>
> >> <input name="View2" value="someanswer" type="hidden">
> >> </form>
> >> </script language="JavaScript">
> >> if (document.Form1.View1.checked)
> >> {
> >> document.Form1.View2.style.visibility="visible";
> >> }
> >> </script>
>
> > Use more accessible JavaScript and *understand* the markup you are
> > using. INPUT of type "hidden" does not hide an input. It creates a
> > hidden INPUT.
>
> > <input type="text" name="View2" style="visibility: hidden;" />
> > <!-- note the "style" attribute that specifies the visibility. -->
>
> > var v1 = document.forms['Form1'].elements['View1'];
> > var v2 = document.forms['Form1'].elements['View2'];
> > if (v1.checked) v2.style.visibility = 'visible';
>
> v2.style.visibility = (v1.checked) ?'visible' :'hiddden';
>
>
>
> > Also, you realize, without encapsulating this in a function, the
> > script will always run inline, and never make "v2" visible. Put it in
> > a function, then fire it when "v1" is toggled, or by some other means
> > call it. (That may be what you meant your problem was.)
>
> --
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

You would have to use either the "display:none" way or the
"visibility:hidden" way depending on how you want the page to look.

If I have multiple checkboxes and I want to be able to use the same
function for each one, how canit be done?
Do I replace (document.Form1.View1.checked) by
(document.Form1.this.name.checked) ?

On Jul 4, 6:56 am, Some Girl <SuperNerdG...> wrote:
> I have a simple form that has one check box, an done text box. I'd
> like the contents of the box to be hidden, but made visible if the
> check box is checked.
> Here's a snippet of code:
>
> <form name="Form1" method="post">
> <input name="View1" type="checkbox"><br>
> <input name="View2" value="someanswer" type="hidden">
> </form>
> </script language="JavaScript">
> if (document.Form1.View1.checked)
> {
> document.Form1.View2.style.visibility="visible";}
>
> </script>
>
> Any suggestions?