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="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").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

 

[OccasionalFlyer]

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").visibility =
"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]

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").visibility =
"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.visibility=="hidden")
{
document.theForm.getElementByID("Institution").style.visibility =
"visible"';
}
}

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

window.onload=init;

</script>

 

[OccasionalFlyer]

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.visibility=="hidden")
{
document.theForm.getElementByID("Institution").style.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>

 

[david.karr]

I modified my JavaScript like this, but this still doesn't work:
<script LANGUAGE="JavaScript">
void choiceInstitution(theForm) {
if(theForm.getElementByID.("Institution").style.visibility=="hidden")
{
document.theForm.getElementByID("Institution").style.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.

 

[Thomas 'PointedEars' Lahn]

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

 

[OccasionalFlyer]

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.getElementByID("Institution").style.display = 'none';
}

window.onload=init;


Here's te element:
<TR>
<TD NOWRAP ALIGN=LEFT>
Institution
</TD>
<TD WIDTH=100% ALIGN=LEFT>
<INPUT TYPE="TEXT" ID="Institution" NAME="Institution"
VALUE="{Individuals.CS-Appl Academic.Institution}" 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]

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.getElementByID("Institution").style.display = 'none';
}

window.onload=init;

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="Institution"
VALUE="{Individuals.CS-Appl Academic.Institution}" SIZE=32
MAXLENGTH=60>
</TD>

</TR>
http://validator.w3.org/

This approach is not working.

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


PointedEars

 

[javajedi2]

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="divSchoolRow1">
<TABLE width=100% border=0 cellpadding=0 cellspacing=2>
<TR>
<TD WIDTH=100% ALIGN=LEFT>
<INPUT TYPE="TEXT" ID="Institution" NAME="Institution"
VALUE="{Individuals.CS-Appl Academic.Institution}" 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="JavaScript">
function showInstitution(choice) {
if(choice == "no")
{
document.getElementById("divSchoolRow1").style.display="none";
}
else
{
document.getElementById("divSchoolRow1").style.display = "";
}
}

</script>

<TABLE width=100% border=0 cellpadding=0 cellspacing=2>
<TR>
<TD width="100%">
<Input type="radio" name="addInstitution" value="Yes"
onClick="showInstitution('yes')">
<Input type="radio" name="addInstitution" CHECKED value="No"
onClick="showInstitution('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