Denis McMahon
11/8/2014 2:09:00 PM
On Thu, 06 Nov 2014 19:34:51 -0800, DrKen wrote:
> I'm trying to modify a web page that uses hard-coded values in XML for
> countries and states. However, we are getting errors because users
> might select a country from the country drop-down list, say, Australia,
> but also choose a U.S. state. Our main student information system,
> PeopleSoft, chokes on invalid combinations like that, even though the
> web page does not.
That's a failing of the main system, or the code that sits between the
web pages and the main system.
I thing the code behind the web pages should be detecting invalid
combinations and bouncing them back to the user to correct, rather than
submitting the invalid data to peoplesoft.
Unless peoplesoft is the code behind the web pages rather than a
downstream database - in which case peoplesoft should either not be
generating web pages that allow invalid combinations, or it should be
handling them.
> I'm no expert at JavaScript, and I would like a little guidance on
> how to check the country drop-down value as soon as it is selected.
> If it is "Untied States" or "Canada," the user is allowed to pick a
> state. If it is any other country, which is unlikely, I want to
> blank out any state value and prevent the state dropdown form
> appearing or if it is already visible, hide it. I know how to respond
> to the "Submit button," but this is more complex.
> The drop-down for countries and states occur four times on one page:
> current address, mailing address, birth country address, and employment
> address.
The simple solution would be to tap into the onchange events of the
dropdowns concerned and do any needed validation there.
When a US state or Canadian province is selected in a state dropdown, use
the onchange handler to set the relevant country in the associated
country pulldown. If the state is set to none, set the country to none.
When the country is changed, just set the state to none. If you're
changing from USA to not-USA you want the state to become none, the same
applies if changing from Canada to not-Canada, this is also true even
when changing from Canada to USA and vice versa.
If you're changing to Canada or to the USA regardless of what you're
changing the country from, there was no valid state value associated with
the previous country that is valid for the new country, so again just
reset to none.
So you need:
onchange handlers for each state field that set the associated country to
one of Canada, USA, None depending on the state selection when the state
is changed;
onchange handlers for each country field that set the associated state
field to none when the country field is changed.
Fortunately you can use the same data to determine valid state / country
combinations for all 4 pairs of fields.
The bulk of the code is going to be identical for all 4 pairs of
dropdowns, but you need to tell the javascript which pair of dropdowns it
needs to operate on.
onchange="stateChanged(this);"
onchange="countryChanged(this);"
Now assuming that you have a consistent way to get from each dropdown to
the associated dropdown, you can use dom navigation to find the relevant
country / state dropdown for the state / country dropdown that was
selected.
This might involve finding a parent element that contained exactly two
dropdowns, and knowing that this is the country / state one, then the
other must be the state / country one, or knowing that the state and
country dropdowns are in adjacent table rows, so you need to look in the
previous / next table row element to find the associated dropdown.
It might even involve finding all the dropdowns in the document and
looking for one with a related name, or it might involve some
relationship between the names of ids of each pair of related dropdowns.
You have a lot of choices.
assuming you have the following select ids:
curr_state, curr_country
mail_state, mail_country
born_state, born_country
work_state, work_country
and that the value of the select option for "None" is "0", country usa is
"163" and country canada is "17" in all the state and country option
lists then you could do something like:
/* State and province names must match exactly spelling and case of names
in option lists */
var us_states = [ /* list of usa state names */ ];
var ca_provs = [ /* list of canada province names */ ];
function gebi(id) { return document.getElementById(id); }
function get_related_el(el) {
bits = el.id.split("_");
if (bit[1] == "country")
return gebi(bit[0]+"_state");
return gebi(bit[0]+"_country");
}
function state_changed(el) {
var state_province = el.selectedOptions.item(0).text;
if (us_states.indexOf(state_province) != -1)
get_related_el(el).value = "163";
else if (ca_provs.indexOf(state_province) != -1)
get_related_el(el).value = "17";
else
get_related_el(el).value = "0";
}
function country_changed(el) {
get_related_el(el).value = "0";
}
Note - above code is untested and may not be the most efficient solution
even if it works. When Thomas "pointy eared" Lahn undoubtedly criticises
the above code, ask him to give you his alternative solution instead.
--
Denis McMahon, denismfmcmahon@gmail.com