// countryState.js - api for country/state interactivity - when country is us/ca, the state dropdown appears, otherwise the state text field appears
// presumes there is a country dropdown, and both a state dropdown and text, both of which are inside regions with ids, in order to hide and show, for example:
/* (escerpted from registration-form.cfm)
Country:
State / Province / Region:
// In this case, the setup is
setCountryState("business_country", "business_state_text", "business_state_dropdown", "stateTextRegion", "stateDropdownRegion");
*/
// setup by calling setCountryState passing the Ids of all the country and state fields/regions to be manipulated
// ---------------------------------------
function setCountryState(countryId, stateTextId, stateDropdownId, stateTextRegionId, stateDropdownRegionId) {
window.countryStateObj = new CountryStateObj(countryId, stateTextId, stateDropdownId, stateTextRegionId, stateDropdownRegionId);
}
// ---------------------------------------
function CountryStateObj(countryId, stateDropdownRegionId, stateDropdownId, stateTextRegionId, stateTextId) {
this.countryId = countryId;
this.stateTextId = stateTextId;
this.stateDropdownId = stateDropdownId;
this.stateTextRegionId = stateTextRegionId;
this.stateDropdownRegionId = stateDropdownRegionId;
this.theCountry = document.getElementById(countryId);
this.theStateText = document.getElementById(stateTextId);
this.theStateDropdown = document.getElementById(stateDropdownId);
this.theStateTextRegion = document.getElementById(stateTextRegionId);
this.theStateDropdownRegion = document.getElementById(stateDropdownRegionId);
}
// ---------------------------------------
function isUSCA() {
with (countryStateObj) {
// var theCountry = document.getElementById("business_country");
var country = theCountry.options[theCountry.selectedIndex].value;
return (country.toLowerCase() == "united states" || country.toLowerCase() == "usa" || country.toLowerCase() == "canada");
}
}
// ---------------------------------------
function focusState() {
// onchange works differently b/w IE and all others - not good to do this in IE
if (!document.all) {
with (countryStateObj) {
// var theStateDropdown = document.getElementById("business_state_dropdown");
// var theStateText = document.getElementById("business_state_text");
if (isUSCA()) {theStateDropdown.focus();} else {theStateText.focus();}
}
}
}
// ---------------------------------------
function setState() {
with (countryStateObj) {
// var theCountry = document.getElementById("business_country");
// var theStateDropdownRegion = document.getElementById("stateDropdownRegion");
// var theStateTextRegion = document.getElementById("stateTextRegion");
// var theStateDropdown = document.getElementById("business_state_dropdown");
// var theStateText = document.getElementById("business_state_text");
var country = theCountry.options[theCountry.selectedIndex].value;
if (isUSCA()) {
// US - show the dropdown, clear the text
theStateDropdownRegion.style.display = "";
theStateTextRegion.style.display = "none";
theStateText.value = "";
} else {
// non-us - hide the dropdown, and drive to "none", and show the text
theStateDropdownRegion.style.display = "none";
theStateDropdown.selectedIndex = 0;
theStateTextRegion.style.display = "";
}
}
}
