The moose likes Struts and the fly likes javascript issue in struts for onchange event Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Frameworks » Struts
Bookmark "javascript issue in struts for onchange event" Watch "javascript issue in struts for onchange event" New topic
Author

javascript issue in struts for onchange event

Ravi Kumar
Greenhorn

Joined: Sep 07, 2005
Posts: 24
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 ]
Merrill Higginson
Ranch Hand

Joined: Feb 15, 2005
Posts: 4864
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.


Merrill
Consultant, Sima Solutions
Ravi Kumar
Greenhorn

Joined: Sep 07, 2005
Posts: 24
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
Carol Enderlin
drifter
Ranch Hand

Joined: Oct 10, 2000
Posts: 1364
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 ]
Merrill Higginson
Ranch Hand

Joined: Feb 15, 2005
Posts: 4864
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";
}
Ravi Kumar
Greenhorn

Joined: Sep 07, 2005
Posts: 24
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
Merrill Higginson
Ranch Hand

Joined: Feb 15, 2005
Posts: 4864
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.
Ravi Kumar
Greenhorn

Joined: Sep 07, 2005
Posts: 24
can you give an example of this. That helps. thanks
Merrill Higginson
Ranch Hand

Joined: Feb 15, 2005
Posts: 4864


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 ]
Ravi Kumar
Greenhorn

Joined: Sep 07, 2005
Posts: 24
thanks for the input. It is working fine now.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: javascript issue in struts for onchange event