Dynamically changing a DIV

[wkeithwork]

I'm pulling my hair out...

I have a few radio boxes where a user can choose different options and
I want to show an explanation of each option after it's clicked.
Here's what I have:

<script type="text/JavaScript">

function toggle(o){
o.className = ( o.className == "show" ) ? "hide" : "show";
}

'function describetype(){
' if (window.event.srcElement.value == "starter")
typedesc.innerHTML="A Starter request is for a new employee who's
never worked for cadbury or the Bottling Group before.";
' if (window.event.srcElement.value == "leaver")
typedesc.innerHTML="A Leaver request is for an existing employee who's
permanently leaving the company.";
'}

'function starter(){
'typedesc.innerHTML="A Starter request is for a new employee who's
never worked for cadbury or the Bottling Group before.";
'}

'function leaver(){
'typedesc.innerHTML="A Leaver request is for an existing employee
who's permanently leaving the company.";
'}

function describetype(o){
if (o == "starter"){
typedesc.innerHTML="Starters are...etc.";
}
if (o == "leaver"){
typedesc.innerHTML="Leavers are...etc.";
}
}

</script>

The first "toggle" function works fine but the "describetype" won't
work. Here's the HTML:

....
<td class="layout bold">
<input type="radio" name="reqtype" value="starter"
checked="checked" onclick="describetype(starter)"> Starter<br>
<input type="radio" name="reqtype" value="leaver"
onclick="describetype(leaver)"> Leaver<br />
</td>
<td class="layout bold">
<input type="radio" name="reqtype" value="mover"> Mover<br />
<input type="radio" name="reqtype" value="adhoc"> Ad Hoc
</td>
....

The error keeps saying that "starter" or "leaver" is undefined. I'm
not much of a javascript guy (mostly the cut and paste variety myself)
but everything I've seen says this should work. No?

Keith

 

[Evertjan.]

wrote on 27 feb 2007 in comp.lang.javascript:

I have a few radio boxes where a user can choose different options and
I want to show an explanation of each option after it's clicked.
Here's what I have:

<script type="text/JavaScript">

function toggle(o){
o.className = ( o.className == "show" ) ? "hide" : "show";
}

'function describetype(){

The apostrophe ' is a vbs remark character,
javasctipt uses //

 

[wkeithwork]

wrote on 27 feb 2007 in comp.lang.javascript:


The apostrophe ' is a vbs remark character,
javasctipt uses //

Ok lesson #1 learned. I changed the comment characters and it still
didn't work but I switched to the ridiculously simple "starter" and
"leaver" functions and that finally works. I wish I knew why it kept
failing but time is more valuable than in-depth knowledge at this
point.

Thanks,

Keith

 

[wkeithwork]

Ok I'm still trying to work on the same form and display a div based
on a select statement and nothing I do seems to work.

I'm trying to make a drop down select list that will display another
list when I choose the second option. Here's the lists:

<B>Employment Type</B>
<select name="emptype" onchange="emptype(this)">
<option value=" "> </option>
<option value="employee">Employee</option>
<option value="contractor">Contractor</option>
</select><br>
<img src="img/spacer_white.gif" width=30 height=1>
<div id=conttype class="hide">
<select name="contracttype">
<option value=" "> </option>
<option value="payroll">Payroll</option>
<option value="agency">Agency</option>
</select><br />
</div>

If they choose "contractor" in the first list, I want a second
dropdown to choose "Payroll" or "Agency".

Here's the code I've got - again it's 99% copied and pasted so I'm
thinking there's probably a syntax error or something:

<script type="text/JavaScript">

function toggle(o){
o.className = ( o.className == "show" ) ? "hide" : "show";
}

function emptype(o){
// This one just alerts me as a test. Even this doesn't work.
var pick = o.options[o.selectedIndex].value;
if (pick == "contractor") alert("Contractor selected");

// Here's what I tried before - didn't work either...
//o = document.getElementsByName("emptype");
//if (o.selectedIndex = 2)
// toggle(conttype);
}

</script>

Thanks,

Keith

 

[wkeithwork]

I think I solved my own problems. I had form objects named the same
thing as functions in both cases and once I changed the names, it all
worked like gangbusters. I assumed objects and functions were
exclusive and it wouldn't matter... Lesson #2.

Keith

 

[Evertjan.]

wrote on 01 mrt 2007 in comp.lang.javascript:

I think I solved my own problems. I had form objects named the same
thing as functions in both cases and once I changed the names, it all
worked like gangbusters. I assumed objects and functions were
exclusive and it wouldn't matter... Lesson #2.

Without quoting we wouldn't know what you are talking about.

This is usenet!

 

[wkeithwork]

wrote on 01 mrt 2007 in comp.lang.javascript:


Without quoting we wouldn't know what you are talking about.

This is usenet!

Surely 99% of people use a news reader that keeps threads together...

Anyway thanks again.

Keith

 

[Evertjan.]

wrote on 02 mrt 2007 in comp.lang.javascript:

Surely 99% of people use a news reader that keeps threads together...

How do you know?

You cannot, since the reader is not the point.

Individual posts do not arrive syngronised on each news server, nor can you
be sure they are kept there for a reasonable time.

Furthermore it is polite "Usenet Netiquette" to edit the quotes to the
essentials that are needed to understand the thread.

Anyway thanks again.

You are welcome.
But why again?
Did you already know the advice?