javascript issue in struts for onchange event

Hello ,
I have to show a drop down of newspapers/maganizes if newspaper/magazine is selected from drop down otherwise i have a show a test box for some other values.

If nothing is selected there should be hidden. For that I am trying to use div tags and then block or show the dropdowns. But my javascript is not working can anyone tell wat is wrong in this.

I am using javascript in struts. can anyone tell me what is wrong in this,

<html:select property="referral" title="Referral" styleId="Referral" onchange="showOptions(this)">
<html

ption value="" >Select</html

ption>
<html

ption value="Email">Email</html

ption>
<html

ption value="Direct Mail">Direct Mail</html

ption>
<html

ption value="Newspaper">Newspaper</html

ption>
<html

ption value="Magazine">Magazine</html

ption>
</html:select>

I am using div tags to hide the data.In my javascript i m setting/hiding these div tags based on values passed from drop down.

<div id="MagazineOptions">
<tr>
<th scope="row" class="extraSpace"><br /><label for="ReferralOther">Please specify which magazine*</label></th>
<td class="extraSpace"><br /><html:select property="referralOther" title="Magazine Title" styleId="Referral">
<html

ption value=" ">Select</html

ption>

<html

ption value="Town Country">Town & Country</html

ption>
<html

ption value="Veranda">Veranda</html

ption>

<html

ption value="Other">Other</html

ption>
</html:select></td>
</tr>
</div>

Here is my javascript code..

function showOptions(name){

if (name=="Newspaper") {
document.getElementById("NewspaperOptions").style.display="none";
document.getElementById("MagazineOptions").style.display="block";
document.getElementById("ReferralOther").style.display="block";
}
elseif (name=="Magazine") {
document.getElementById("NewspaperOptions").style.display="block";
document.getElementById("MagazineOptions").style.display="none";
document.getElementById("ReferralOther").style.display="block";
}
elseif ((name=="Member Referral")||(name=="Hotel Guest")) {
document.getElementById("NewspaperOptions").style.display="block";
document.getElementById("MagazineOptions").style.display="block";
document.getElementById("ReferralOther").style.display="none";
}
}

This is not working for me. can anyone tell me wat is wrong in this..
Thanks
[ January 05, 2007: Message edited by: Bear Bibeault ]

when you specify:

onchange="showOptions(this)"

The "this" is referring to the select object. To get the current value, you must use the value attribute. Try changing it to:

onchange="showOptions(this.value)"

and it should work.

I made those changes but it still doesn't work. Can anyone help me.even when the form loads . i am trying to hide the content in div tags. but it is being displayed.

any suggestions

Unless I'm missing something your div as written in the original post of course will display.

Has your code changed? How are you trying to hide the div when the page initially loads?

I've hidden one like this:

<div id="MagazineOptions" style="display: none">
...

Unless you think there is something wrong with the struts tags, it would be easier for me to follow your example if you showed the html instead of the code.

By the way, EaseUp. You are less likely to get help by including things like plzz-anyone in the subject or message. Also, UseRealWords.
[ January 05, 2007: Message edited by: Carol Enderlin ]

Carol's suggestion is a good one. You should start out with the display of all of the sections being suppressed with display:none.

Also, on closer examination of your javaScript method, it appears to be exactly backwards. Don't you want to display the section they selected, and supress the others? example:

if (name=="Newspaper") {
document.getElementById("NewspaperOptions").style.display="block";
document.getElementById("MagazineOptions").style.display="none";
document.getElementById("ReferralOther").style.display="none";
}

Hello,

I finally got it working. I included the div tags inside the <tr> tags .It works fine . However I have another issue with this.
When the form intially loads I am hiding the contents.

When they select anthing from the another drop down, I show related drop downs to that entry.

This runs fine as long as there are no errors on the page and the form submission goes through. But if there are any validation errors on the page, it reloads tha page and it basically is hiding the contents selected. Which should not happen.

Any suggestions as how to overcome this?? Let me know.

Thanks

You will need to code an onload event in your <body> tag that checks to see if the dropdown has a value other than null. If it does, use the same logic you've presented to make visible the relevant portion of the JSP.

can you give an example of this. That helps. thanks

The above assumes showOptions() is the function you call from the onChange event. Also, the event should be spelled onload instead of onlode. I had to misspell it to get past the JavaRanch filters.
[ January 08, 2007: Message edited by: Merrill Higginson ]

thanks for the input. It is working fine now.