Help with basic onClick mechanism please

I am pretty new to JavaScript and having trouble with something that
should, I think, be fairly easy.

I have one form.
I have two radio buttons.
I have a text box that is hidden.
If you click the radio button that has the value "Yes", the hidden
field should be made visible.

I would appreciate help knowing what I did wrong. Here is the
pertinent code:

<TD WIDTH=100% ALIGN=LEFT>
<INPUT TYPE="HIDDEN" NAME="Institution" VALUE="{Individuals.CS-
Appl Academic.Institution}" SIZE=32 MAXLENGTH=5>
</TD>

<TD width="100%">
<Input type="radio" name="addInstitution" value="Yes"
onClick="choiceInstitution(this.form)">
<Input type="radio" name="addInstitution" CHECKED value="No"
onClick="choiceInstitution(this.form)">
</TD>

<script LANGUAGE="JavaScript">
void choiceInstitution(theForm) {
if(theForm.addInstitution[0].checked)
{
document.theForm.getElementByID("Institution").vis ibility =
"visible"';
}
}

</script>


When I click the radio button with the value of "Yes", nothing changes
on the screen. I'm wondering if this is because the type of the
element is HIDDEN. How should I change this so that I can get it to
display when I click the yes radio button? Thanks.

Ken

OccasionalFlyer wrote:
[snip]

I would appreciate help knowing what I did wrong. Here is the
pertinent code:

TD WIDTH=100% ALIGN=LEFT
INPUT TYPE="HIDDEN" NAME="Institution" VALUE="{Individuals.CS-
Appl Academic.Institution}" SIZE=32 MAXLENGTH=5
/TD

An Input element of the HIDDEN type will never be displayed.
You need to change this to the TEXT type and set the style attribute to
"visibility:hidden;"

TD width="100%"
Input type="radio" name="addInstitution" value="Yes"
onClick="choiceInstitution(this.form)"
Input type="radio" name="addInstitution" CHECKED value="No"
onClick="choiceInstitution(this.form)"
/TD

script LANGUAGE="JavaScript"
void choiceInstitution(theForm) {
if(theForm.addInstitution[0].checked)
{
document.theForm.getElementByID("Institution").vis ibility =
"visible"';
}
}

/script

You don't have any elements with an id of "Institution"
I assume you mean your HIDDEN input element which has a /name/ of
"Institution".

Give that an id of "Institution" and you're golden

On Jun 11, 2:26 pm, Dan Rumney <danrum... (AT) warpmail (DOT) net> wrote:

OccasionalFlyer wrote:

[snip]



I would appreciate help knowing what I did wrong. Here is the
pertinent code:

TD WIDTH=100% ALIGN=LEFT
INPUT TYPE="HIDDEN" NAME="Institution" VALUE="{Individuals.CS-
Appl Academic.Institution}" SIZE=32 MAXLENGTH=5
/TD

An Input element of the HIDDEN type will never be displayed.
You need to change this to the TEXT type and set the style attribute to
"visibility:hidden;"





TD width="100%"
Input type="radio" name="addInstitution" value="Yes"
onClick="choiceInstitution(this.form)"
Input type="radio" name="addInstitution" CHECKED value="No"
onClick="choiceInstitution(this.form)"
/TD

script LANGUAGE="JavaScript"
void choiceInstitution(theForm) {
if(theForm.addInstitution[0].checked)
{
document.theForm.getElementByID("Institution").vis ibility =
"visible"';
}
}

/script

You don't have any elements with an id of "Institution"
I assume you mean your HIDDEN input element which has a /name/ of
"Institution".

Give that an id of "Institution" and you're golden

Thanks for the help. I have a follow-up question. I know how to set
styles for a whole page, whether in the page or (better) in an
external style sheet. I don't want to override the style of all INPUT
elements, but I can't seem to find any examples of modifying the style
for one specific HTML element on a page, and nothing else of that same
type. How can I do that? Thanks.

OccasionalFlyer wrote:
[snip]

Thanks for the help. I have a follow-up question. I know how to set
styles for a whole page, whether in the page or (better) in an
external style sheet. I don't want to override the style of all INPUT
elements, but I can't seem to find any examples of modifying the style
for one specific HTML element on a page, and nothing else of that same
type. How can I do that? Thanks.

Wrong newsgroup for that. [Followup-To set to
comp.infosystems.www.authoring.stylesheets]

However, you can use id and class selectors in your stylesheets to limit
your styling to specific elements.

For instance

input#Institution
{

}

should be used for applying styling to the INPUT element with
id="Institution"

On Jun 11, 3:26 pm, OccasionalFlyer <klit... (AT) apu (DOT) edu> wrote:

On Jun 11, 2:26 pm, Dan Rumney <danrum... (AT) warpmail (DOT) net> wrote:



OccasionalFlyer wrote:

[snip]

I would appreciate help knowing what I did wrong. Here is the
pertinent code:

TD WIDTH=100% ALIGN=LEFT
INPUT TYPE="HIDDEN" NAME="Institution" VALUE="{Individuals.CS-
Appl Academic.Institution}" SIZE=32 MAXLENGTH=5
/TD

An Input element of the HIDDEN type will never be displayed.
You need to change this to the TEXT type and set the style attribute to
"visibility:hidden;"

TD width="100%"
Input type="radio" name="addInstitution" value="Yes"
onClick="choiceInstitution(this.form)"
Input type="radio" name="addInstitution" CHECKED value="No"
onClick="choiceInstitution(this.form)"
/TD

script LANGUAGE="JavaScript"
void choiceInstitution(theForm) {
if(theForm.addInstitution[0].checked)
{
document.theForm.getElementByID("Institution").vis ibility =
"visible"';
}
}

/script

You don't have any elements with an id of "Institution"
I assume you mean your HIDDEN input element which has a /name/ of
"Institution".

Give that an id of "Institution" and you're golden

Thanks for the help. I have a follow-up question. I know how to set
styles for a whole page, whether in the page or (better) in an
external style sheet. I don't want to override the style of all INPUT
elements, but I can't seem to find any examples of modifying the style
for one specific HTML element on a page, and nothing else of that same
type. How can I do that? Thanks.

I modified my JavaScript like this, but this still doesn't work:
<script LANGUAGE="JavaScript">
void choiceInstitution(theForm) {
if(theForm.getElementByID.("Institution").style.vi sibility=="hidden")
{
document.theForm.getElementByID("Institution").sty le.visibility =
"visible"';
}
}

function init(){
document.forms[0].getElementByID("Institution").style.visibility
= "hidden";
}

window.onload=init;

</script>

OccasionalFlyer wrote:
[snip]

I modified my JavaScript like this, but this still doesn't work:
script LANGUAGE="JavaScript"
void choiceInstitution(theForm) {
if(theForm.getElementByID.("Institution").style.vi sibility=="hidden")
{
document.theForm.getElementByID("Institution").sty le.visibility =
"visible"';
}
}

function init(){
document.forms[0].getElementByID("Institution").style.visibility
= "hidden";
}

window.onload=init;

/script

What about your INPUT element... did you set it's ID correctly?

On Jun 11, 4:57 pm, Dan Rumney <danrum... (AT) warpmail (DOT) net> wrote:

OccasionalFlyer wrote:

[snip]



I modified my JavaScript like this, but this still doesn't work:
script LANGUAGE="JavaScript"
void choiceInstitution(theForm) {
if(theForm.getElementByID.("Institution").style.vi sibility=="hidden")
{
document.theForm.getElementByID("Institution").sty le.visibility =
"visible"';
}
}

function init(){
document.forms[0].getElementByID("Institution").style.visibility
= "hidden";
}

window.onload=init;

/script

What about your INPUT element... did you set it's ID correctly?

Yes. Please excuse the extra HTML (added by the PeopleSoft tool I'm
required to use for part of this, hence the weird value for
"Institution") but here's all the HTML that should show up on the
form:

<TABLE width=100% border=0 cellpadding=0 cellspacing=2>

<!** Name=AddInt, Type=Html **>
<TR>
<TD width="100%">
<P>
Add Institution?
</P>
</TD>
</TR>
<!**>
</TABLE>

<TABLE width=100% border=0 cellpadding=0 cellspacing=2>

<!** Name=Institution, Type=Text Entry **>
<TR>
<TD NOWRAP ALIGN=LEFT>
Institution
</TD>
<TD WIDTH=100% ALIGN=LEFT>
<INPUT TYPE="TEXT" NAME="Institution" VALUE="{Individuals.CS-
Appl Academic.Institution}" SIZE=32 MAXLENGTH=5>
</TD>

</TR>
<!**>
</TABLE>

<TABLE width=100% border=0 cellpadding=0 cellspacing=2>

<!** Name=Radio button to test JavaScript, Type=Html **>
<TR>
<TD width="100%">
<Input type="radio" name="addInstitution" value="Yes"
onClick="choiceInstitution(this.form)">
<Input type="radio" name="addInstitution" CHECKED value="No"
onClick="choiceInstitution(this.form)">

</TD>
</TR>
<!**>
</TABLE>

OccasionalFlyer wrote:
[snip]

TD WIDTH=100% ALIGN=LEFT
INPUT TYPE="TEXT" NAME="Institution" VALUE="{Individuals.CS-
Appl Academic.Institution}" SIZE=32 MAXLENGTH=5
/TD

You still don't have an id attribute

<INPUT TYPE="TEXT" id="Institution"
NAME="Institution" VALUE="{Individuals.CS-Appl Academic.Institution}"
SIZE=32 MAXLENGTH=5>

On Jun 11, 4:40 pm, OccasionalFlyer <klit... (AT) apu (DOT) edu> wrote:

I modified my JavaScript like this, but this still doesn't work:
script LANGUAGE="JavaScript"
void choiceInstitution(theForm) {
if(theForm.getElementByID.("Institution").style.vi sibility=="hidden")
{
document.theForm.getElementByID("Institution").sty le.visibility =
"visible"';
}

Even if this can work (and I don't know if it can), I think it's a bad
idea to check conditions based on the existing style of a component.
You're better off using the "checked" state of the checkbox, as you
were before, or anything else but the style of a component. I've
always felt that "style" should be write-only.

OccasionalFlyer wrote:

I modified my JavaScript like this, but this still doesn't work:
script LANGUAGE="JavaScript"

I would consider learning how to write Valid HTML to be a
prerequisite for learning proper client-side scripting.

http://validator.w3.org/

void choiceInstitution(theForm) {

This causes a SyntaxError. choiceInstitution(theForm) would be
considered a CallExpression but it is not followed by a `;'
before the `{'.

You were looking for a decent HTML reference (say, the HTML 4.01
Specification), then a decent scripting reference (say, the Core
JavaScript 1.5+ Reference), and then

function choiceInstitution(theForm)
{
//
}

Any function that does not return a value explicitly, returns `undefined'.

See also http://jibbering.com/faq/


PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>