Help with basic onClick mechanism please

[OccasionalFlyer]

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="Instituti on" VALUE="{Individ uals.CS-
Appl Academic.Instit ution}" SIZE=32 MAXLENGTH=5>
</TD>

<TD width="100%">
<Input type="radio" name="addInstit ution" value="Yes"
onClick="choice Institution(thi s.form)">
<Input type="radio" name="addInstit ution" CHECKED value="No"
onClick="choice Institution(thi s.form)">
</TD>

<script LANGUAGE="JavaS cript">
void choiceInstituti on(theForm) {
if(theForm.addI nstitution[0].checked)
{
document.theFor m.getElementByI D("Institution" ).visibility =
"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

[Dan Rumney]

Re: Help with basic onClick mechanism please

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="Instituti on" VALUE="{Individ uals.CS-
Appl Academic.Instit ution}" 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:hid den;"

>
<TD width="100%">
<Input type="radio" name="addInstit ution" value="Yes"
onClick="choice Institution(thi s.form)">
<Input type="radio" name="addInstit ution" CHECKED value="No"
onClick="choice Institution(thi s.form)">
</TD>
>
<script LANGUAGE="JavaS cript">
void choiceInstituti on(theForm) {
if(theForm.addI nstitution[0].checked)
{
document.theFor m.getElementByI D("Institution" ).visibility =
"visible"';
}
}
>
</script>

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

Give that an id of "Institutio n" and you're golden

[OccasionalFlyer]

Re: Help with basic onClick mechanism please

On Jun 11, 2:26 pm, Dan Rumney <danrum...@warp mail.netwrote:

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="Instituti on" VALUE="{Individ uals.CS-
Appl Academic.Instit ution}" 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:hid den;"
>
>
>
>
>

<TD width="100%">
<Input type="radio" name="addInstit ution" value="Yes"
onClick="choice Institution(thi s.form)">
<Input type="radio" name="addInstit ution" CHECKED value="No"
onClick="choice Institution(thi s.form)">
</TD>

>

<script LANGUAGE="JavaS cript">
void choiceInstituti on(theForm) {
if(theForm.addI nstitution[0].checked)
{
document.theFor m.getElementByI D("Institution" ).visibility =
"visible"';
}
}

>

</script>

>
You don't have any elements with an id of "Institutio n"
I assume you mean your HIDDEN input element which has a /name/ of
"Institutio n".
>
Give that an id of "Institutio n" 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.

[Dan Rumney]

Re: Help with basic onClick mechanism please

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.infosystem s.www.authoring.stylesheets]

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

For instance

input#Instituti on
{

}

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

[OccasionalFlyer]

Re: Help with basic onClick mechanism please

On Jun 11, 3:26 pm, OccasionalFlyer <klit...@apu.ed uwrote:

On Jun 11, 2:26 pm, Dan Rumney <danrum...@warp mail.netwrote:
>
>
>

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="Instituti on" VALUE="{Individ uals.CS-
Appl Academic.Instit ution}" 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:hid den;"

>

<TD width="100%">
<Input type="radio" name="addInstit ution" value="Yes"
onClick="choice Institution(thi s.form)">
<Input type="radio" name="addInstit ution" CHECKED value="No"
onClick="choice Institution(thi s.form)">
</TD>

>

<script LANGUAGE="JavaS cript">
void choiceInstituti on(theForm) {
if(theForm.addI nstitution[0].checked)
{
document.theFor m.getElementByI D("Institution" ).visibility =
"visible"';
}
}

>

</script>

>

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

>

Give that an id of "Institutio n" 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="JavaS cript">
void choiceInstituti on(theForm) {
if(theForm.getE lementByID.("In stitution").sty le.visibility== "hidden")
{
document.theFor m.getElementByI D("Institution" ).style.visibil ity =
"visible"';
}
}

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

window.onload=i nit;

</script>

[Dan Rumney]

Re: Help with basic onClick mechanism please

OccasionalFlyer wrote:
[snip]

I modified my JavaScript like this, but this still doesn't work:
<script LANGUAGE="JavaS cript">
void choiceInstituti on(theForm) {
if(theForm.getE lementByID.("In stitution").sty le.visibility== "hidden")
{
document.theFor m.getElementByI D("Institution" ).style.visibil ity =
"visible"';
}
}
>
function init(){
document.forms[0].getElementByID ("Institution") .style.visibili ty
= "hidden";
}
>
window.onload=i nit;
>
</script>

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

[OccasionalFlyer]

Re: Help with basic onClick mechanism please

On Jun 11, 4:57 pm, Dan Rumney <danrum...@warp mail.netwrote:

OccasionalFlyer wrote:
>
[snip]
>
>
>

I modified my JavaScript like this, but this still doesn't work:
<script LANGUAGE="JavaS cript">
void choiceInstituti on(theForm) {
if(theForm.getE lementByID.("In stitution").sty le.visibility== "hidden")
{
document.theFor m.getElementByI D("Institution" ).style.visibil ity =
"visible"';
}
}

>

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

>

window.onload=i nit;

>

</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
"Institutio n") 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=Institutio n, Type=Text Entry **>
<TR>
<TD NOWRAP ALIGN=LEFT>
Institution
</TD>
<TD WIDTH=100% ALIGN=LEFT>
<INPUT TYPE="TEXT" NAME="Instituti on" VALUE="{Individ uals.CS-
Appl Academic.Instit ution}" 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="addInstit ution" value="Yes"
onClick="choice Institution(thi s.form)">
<Input type="radio" name="addInstit ution" CHECKED value="No"
onClick="choice Institution(thi s.form)">

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

[Dan Rumney]

Re: Help with basic onClick mechanism please

OccasionalFlyer wrote:
[snip]

<TD WIDTH=100% ALIGN=LEFT>
<INPUT TYPE="TEXT" NAME="Instituti on" VALUE="{Individ uals.CS-
Appl Academic.Instit ution}" SIZE=32 MAXLENGTH=5>
</TD>

You still don't have an id attribute

<INPUT TYPE="TEXT" id="Institution "
NAME="Instituti on" VALUE="{Individ uals.CS-Appl Academic.Instit ution}"
SIZE=32 MAXLENGTH=5>

[david.karr]

Re: Help with basic onClick mechanism please

On Jun 11, 4:40 pm, OccasionalFlyer <klit...@apu.ed uwrote:

I modified my JavaScript like this, but this still doesn't work:
<script LANGUAGE="JavaS cript">
void choiceInstituti on(theForm) {
if(theForm.getE lementByID.("In stitution").sty le.visibility== "hidden")
{
document.theFor m.getElementByI D("Institution" ).style.visibil ity =
"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.

[Thomas 'PointedEars' Lahn]

Re: Help with basic onClick mechanism please

OccasionalFlyer wrote:

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

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

http://validator.w3.org/

void choiceInstituti on(theForm) {

This causes a SyntaxError. choiceInstituti on(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 choiceInstituti on(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>

[OccasionalFlyer]

Re: Help with basic onClick mechanism please

I'm still trying to make this work. I don't know if the code to
make the element visible works or not because I cannot make the
element invisible. Here's my approach to trying to make it invisible
to start, based on an example I found for having something happen
automatically at onLoad:
function init(){
document.getEle mentByID("Insti tution").style. display = 'none';
}

window.onload=i nit;


Here's te element:
<TR>
<TD NOWRAP ALIGN=LEFT>
Institution
</TD>
<TD WIDTH=100% ALIGN=LEFT>
<INPUT TYPE="TEXT" ID="Institution " NAME="Instituti on"
VALUE="{Individ uals.CS-Appl Academic.Instit ution}" SIZE=32
MAXLENGTH=60>
</TD>

</TR>


This approach is not working. How can I make this one element
invisible by default when the page is displayed? Thanks.

[Thomas 'PointedEars' Lahn]

Re: Help with basic onClick mechanism please

OccasionalFlyer wrote:

I'm still trying to make this work. I don't know if the code to
make the element visible works or not because I cannot make the
element invisible. Here's my approach to trying to make it invisible
to start, based on an example I found for having something happen
automatically at onLoad:
function init(){
document.getEle mentByID("Insti tution").style. display = 'none';
}
>
window.onload=i nit;

Use

<body onload="init()" >

instead of this line.

Here's te element:
<TR>
<TD NOWRAP ALIGN=LEFT>
Institution
</TD>
<TD WIDTH=100% ALIGN=LEFT>
<INPUT TYPE="TEXT" ID="Institution " NAME="Instituti on"
VALUE="{Individ uals.CS-Appl Academic.Instit ution}" SIZE=32
MAXLENGTH=60>
</TD>
>
</TR>

http://validator.w3.org/

This approach is not working.

http://jibbering.com/faq/#FAQ4_43

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>

[javajedi2@yahoo.com]

Re: Help with basic onClick mechanism please

I've been working on this and found a basic error. I copied a
fragment from a web page tutorial that had getElementByID. I found in
the error console that it should be getElementById. With that fix, I
was able to get an INPUT element with an in-line style (<INPUT
TYPE="TEXT" style="display: none"..., to begin hidden and then be shown
when I clicked a radio button. What I need, thoough, is to have the
entire line, including its "label" hidden. So I tried this:

<style type="text/css">
#divSchoolRow1 {
display:none;
}
</style>


Then, down in the HTML, I have
<div id="divSchoolRo w1">
<TABLE width=100% border=0 cellpadding=0 cellspacing=2>
<TR>
<TD WIDTH=100% ALIGN=LEFT>
<INPUT TYPE="TEXT" ID="Institution " NAME="Instituti on"
VALUE="{Individ uals.CS-Appl Academic.Instit ution}" SIZE=32
MAXLENGTH=60>
Institution
</TD>
</TR>
</TABLE>
</div>

Great. The little table begins hidden. (It really should be a table
row, but that's a little matter I hope.)

Unfortunately, the code that relied upon a radio button to display the
INPUT element and worked great doesn't work for a div.

<script LANGUAGE="JavaS cript">
function showInstitution (choice) {
if(choice == "no")
{
document.getEle mentById("divSc hoolRow1").styl e.display="none ";
}
else
{
document.getEle mentById("divSc hoolRow1").styl e.display = "";
}
}

</script>

<TABLE width=100% border=0 cellpadding=0 cellspacing=2>
<TR>
<TD width="100%">
<Input type="radio" name="addInstit ution" value="Yes"
onClick="showIn stitution('yes' )">
<Input type="radio" name="addInstit ution" CHECKED value="No"
onClick="showIn stitution('no') ">

</TD>
</TR
</TABLE>


By the way, I appreciate pointers to validators. Unfortunately, the
validator basically found every single line of my .html file invalid,
beginning with the absence of a DTD, so that didn't really help me.

Anyway, can someone tell me what I'm doing wrong? I installed
Firebug but haven't been able to get it to tell me anything. Thanks.

Ken