Re: struts selection and Javascript onchange question
Hi, I had a similar problem and tried to find the best way to handle the problem, without mixing JavaScript andjsp syntax. What I came up with was a series ofselect boxes, some ofwhich were dependant on others,that changed their values based onthe selection made in a different select box.I havea series of select boxes thatcall the submit methodeverytime a change is made. Calling the submit method in the onchange event handler, means that the form posts itself every time selection is made.I can then track which of theselect boxes was changed, read the new value, which has just been submitted and populate the other lists based on the newly changedvalue. This is an example of what I mean. Within jsp page. html:form action="/archive.do" bean:message key="select.title.seasons" / html:select property="season" onchange="submit()" html:options property="value" collection="seasonsList" / /html:selectbr/br/ html:hidden property="option" value="season" / html:hidden property="action" value="Populate" //html:formhtml:form action="/archive.do"bean:message key="select.title.oppositions" / html:select property="opposition" onchange="submit()" html:options property="value" collection="oppositionsList" / /html:selectbr/br/html:hidden property="option" value="opposition" / html:hidden property="action" value="Populate" //html:form Within perform method: String action = form instance.getAction(); // action set by hidden variable in jsp page String option = form-instance.getOption(); // option set by hidden variable in jsp page if the action is equal to the action specified in the form's hidden variable and option is equal to option specified in the forms hidden variable, then retrieve the selected value of the first select box and populate the arrayList of options for the second select box. I hope this makes sense. Chiji. From: Robin Whitley <[EMAIL PROTECTED]> Reply-To: [EMAIL PROTECTED] To: "'[EMAIL PROTECTED]'" <[EMAIL PROTECTED]> Subject: struts selection and Javascript onchange question Date: Tue, 28 Aug 2001 23:25:50 -0400 MIME-Version: 1.0 Received: from [64.125.133.20] by hotmail.com (3.2) with ESMTP id MHotMailBD55ABD5004540043217407D85140B790; Tue, 28 Aug 2001 20:26:13 -0700 Received: (qmail 11536 invoked by uid 500); 29 Aug 2001 03:24:58 - Received: (qmail 11524 invoked from network); 29 Aug 2001 03:24:58 - Received: from greensboro.bondisoftware.com (216.54.174.133) by daedalus.apache.org with SMTP; 29 Aug 2001 03:24:58 - Received: by COSMO with Internet Mail Service (5.5.2653.19)id ; Tue, 28 Aug 2001 23:25:51 -0400 From struts-user-return-16241-cn081 Tue, 28 Aug 2001 20:27:23 -0700 Mailing-List: contact [EMAIL PROTECTED]; run by ezmlm Precedence: bulk list-help: <mailto:[EMAIL PROTECTED]> list-unsubscribe: <mailto:[EMAIL PROTECTED]> list-post: <mailto:[EMAIL PROTECTED]> Delivered-To: mailing list [EMAIL PROTECTED] Message-ID: 3125D8065A0AD411A90A009027B11742058942@COSMO X-Mailer: Internet Mail Service (5.5.2653.19) X-Spam-Rating: daedalus.apache.org 1.6.2 0/1000/N I have a form that has a selection box for country. If "UNITED STATES" is selected, the form has a stateProvince selection box that should be populated with "state" options. If "CANADA" is selected, the stateProvince selection box should be populated with the "province" options. I use struts_logic:equal based on the "country" bean property to accomplish this. The form populates the struts_html:options from a collection. The logic works properly if there is an initial value for country. However, when the country option is changed, the onchange event does not appear to fire the javascript function fillStateProvince. What I tried to do in the fillStateProvince function was to test the selected option for country, and set the value on the bean, hoping that this would set my struts_html:options properly. My sysouts indicate that when the form loads, it sets the country value to UNITED STATES and then to CANDADA, but that when I change country, the function doesn't fie. I've included the pertinent code. My question, is this the proper way to handle this or is there a better way to accomplish the same result. Does anybody see anything silly that I am doing in the Javascript, or struts logic that is causing this result. Any help would be appreciated. Thanks, Robin Whitley <% -- Javascript -- %> <%@ page language="Java" contentType="text/html; charset=UTF-8" >errorPage="error.jsp" %> <%-- In the form - country -- %> labelProperty="label" / <%-- In the form - stateProvince -- %> value="UNITED STATES" labelProperty="label" / value="CANADA" property="value" labelProperty="label" / Get your FREE download of MSN Explorer at http://explorer.msn.com
Re: struts selection and Javascript onchange question
Hi Robin, Chiji:
What I do is to create a Bean (called Option)
that I will use tostore this
properties:
optionGroup The group to which our
option is associated (The Country of the Province/State in our
case).
optionValue The value of the option
(The Province/State code or whatever you'll store).
optionLabel The label the option
will display (The Name of the Province/State).
So, In my action, for each Province/State I create
an Option Object andputit inside a Vector (ie. 'options'), then I
putthe Vector in request scope (session If you like).
After setting my Vector 'options' in request, I
createa Javascript Array in my jsp this
way (I will use this Javascript Array to fill my
options later with a javascript function):
script
language="JavaScript"
optionGroups = new
Array();
optionValues = new Array();
optionLabels = new
Array();
logic:iterate id="option"
name="options" scope="request" indexId="i"
optionGroups[bean:write name="i" filter="true"/] =
"bean:write name="option" property="optionGroup"
filter="true"/";
optionValues[bean:write name="i" filter="true"/] =
"bean:write name="option" property="optionValue"
filter="true"/";
optionLabels[bean:write name="i" filter="true"/] =
"bean:write name="option" property="optionLabel" filter="true"/";
/logic:iterate
/script
Now, On the OnChange event of the Combobox I call
this function like this:
And this is the Javascript Function I made to
change dynamically the options on the other combobox:
script
language="JavaScript"
function
setNewOptions(cboBox, IdCboBoxToChange) {
cboBoxToChange = new
Object();
if
(isNaN(IdCboBoxToChange)){
cboBoxToChange = eval("document." +
cboBox.form.name + "." + IdCboBoxToChange + ";");
}else{
cboBoxToChange = eval("document." + cboBox.form.name + "." +
cboBox.name + "[" + IdCboBoxToChange + "];");
}
cboBoxToChange.length = 1;
for (var i = 0; i cboBoxToChange.length; i++)
{
cboBoxToChange.options[i] = new
Option("-Select-");
cboBoxToChange.options[i].value =
"";
} var j =
1; for (var i = 0; i
optionValues.length; i++) {
if ( cboBox.value == optionGroups[i] )
{
cboBoxToChange.options[j] = new
Option(optionLabels[i]);
cboBoxToChange.options[j].value =
optionValues[i];
j++;
}
}
}
/script
This works both in Internet Explorer and Netscape.
I knowthis is somekinda complex, but it helps you in optimize
performance and reusability (You're not reloading the page several times).
Hope this helps :).
Cheers.
Luis
Olivares.
[EMAIL PROTECTED]
------
"Intelligence is the ability to avoid
doing work, yet getting the work
done"
--Linus Torvalds--
- Original Message -
From:
chiji nwankwo
To: [EMAIL PROTECTED]
Sent: Wednesday, August 29, 2001 5:13
AM
Subject: Re: struts selection and
Javascript onchange question
Hi,
I had a similar problem and tried to find the best way to handle the
problem, without mixing JavaScript andjsp syntax. What I
came up with was a series ofselect boxes, some ofwhich were
dependant on others,that changed their values based onthe
selection made in a different select box.I havea series of
select boxes thatcall the submit methodeverytime a change is
made. Calling the submit method in the onchange event handler, means
that the form posts itself every time selection is made.I can then
track which of theselect boxes was changed, read the new value, which
has just been submitted and populate the other lists based on the newly
changedvalue. This is an example of what I mean.
Within jsp page.
html:form action="/archive.do"
bean:message key="select.title.seasons" /
html:select property="season"
onchange="submit()"
html:options property="value" collection="seasonsList"
/
/html:selectbr/br/
html:hidden property="option" value="season"
/ html:hidden property="action" value="Populate"
//html:formhtml:form
action="/archive.do"bean:message
key="select.title.oppositions" /
html:select property="opposition"
onchange="submit()"
html:options property="value" collection="oppositionsList"
/
/html:selectbr/br/html:hidden
property="option" value="opposition" /
html:hidden property="action" value="Populate"
//html:form
Within perform method:
struts selection and Javascript onchange question
I have a form that has a selection box for country. If UNITED STATES is
selected, the form has a stateProvince selection box that should be
populated with state options. If CANADA is selected, the stateProvince
selection box should be populated with the province options. I use
struts_logic:equal based on the country bean property
to accomplish this. The form populates the struts_html:options from a
collection. The logic works properly if there is an initial value for
country. However, when the country option is changed, the onchange event
does not appear to fire the javascript function fillStateProvince.
What I tried to do in the fillStateProvince function was to test the
selected option for country, and set the value on the bean, hoping that this
would set my struts_html:options properly. My sysouts indicate that when
the form loads, it sets the country value to UNITED STATES and then to
CANDADA, but that when I change country, the function doesn't fie.
I've included the pertinent code. My question, is this the proper way to
handle this or is there a better way to accomplish the same result.
Does anybody see anything silly that I am doing in the Javascript, or struts
logic that is causing this result.
Any help would be appreciated.
Thanks,
Robin Whitley
% -- Javascript -- %
%@ page language=Java contentType=text/html; charset=UTF-8
errorPage=error.jsp %
jsp:useBean id=user scope=session class=com.sssw.website.model.User/
SCRIPT language=JavaScript
function fillStateProvince(inForm,selected) {
if (selected == 'UNITED STATES') {
%
user.setCountry(UNITED STATES);
System.out.println( Set Country United States);
%
}
if (selected == 'CANADA') {
%
user.setCountry(CANADA);
System.out.println( Set Country CANADA);
%
}
}
/SCRIPT
%-- In the form - country -- %
td colspan=2
struts_html:select onchange=javascript:
optionsStateProvince(document.userRegistrationForm,document.userRegistration
Form.country.options[document.userRegistrationForm.country.selectedIndex].te
xt) property=country
struts_html:options collection=countryOptions property=value
labelProperty=label /
/struts_html:select
/td
%-- In the form - stateProvince -- %
tr valign=top
td width = 500 class=bodytext
struts_bean:message key=UserRegistration.stateProvince /
/td
struts_logic:equal name=user scope=session property=country
value=UNITED STATES
td colspan=2 height=29 align=left
struts_html:select property=state
struts_html:options collection=stateOptions property=value
labelProperty=label /
/struts_html:select
/td
/struts_logic:equal
struts_logic:equal name=user scope=session property=country
value=CANADA
td colspan=2 height=29 align=left
struts_html:select property=state
struts_html:options collection=provinceOptions
property=value labelProperty=label /
/struts_html:select
/td
/struts_logic:equal
/tr
