I have three servers: development, QA, and production. On development and QA the JavaScript runs fine. On production I get a JavaScript error only with Firefox. The code works fine on the production box with Internet Explorer. Here's the deal...
I have a form with two fields with the same name. The name is "state." The reason is that the user can choose a country and the state select automatically gets populated based on the selected country. One state select is for the contact info section and one state select is for the credit card info section. There is a bunch of code that dynamically does this and it dynamically builds a select and calls the select "state." So when I use JavaScript to refer to the state selects, I use [0] and [1] to refer to the select. I get the following error:
document.form.state has no properties
Here is the relevant HTML and JavaScript:
When the page loads, it sets the contact state and the credit card state like this:
<body onload="postOpen()">
Then the JavaScript function postOpen() is defined like this:
function postOpen()
{
changeCreditCardCountry();
changeCountry();
}
Then changeCreditCardCountry() sets the country and state select for the credit card section:
function changeCreditCardCountry()
{
setStateList(countryID, document.getElementById("c
cDivState"
), document.forms.SignUp.cred
itCardCoun
try, false, false, "class");
}
Then setStateList() sets the state select based on the country:
function setStateList(p_country, p_listObject, p_stateObject, p_bDisabled, p_sSelected, p_sClass) {
var form = document.forms[0];
var sList = "";
sList = getState(p_country);
sList = changeSelectedValue(sList,
p_sSelected, true);
// Set the list
p_listObject.innerHTML = sList;
// If the state object is not null it means there are two state fields on the form
if (p_stateObject==null) {
form.state.disabled = p_bDisabled;
form.state.className = p_sClass;
} else {
form.state[1].disabled = p_bDisabled;
form.state[1].className = p_sClass;
}
// return the list in case it has to be manipulated (i.e. changing the selected value)
return sList;
}
Then the HTML has two divs for the place with the state selects go:
<!--a bunch of stuff-->
<span id="divState"> </span
>
<!--more stuff-->
<span id="ccDivState"> </sp
an>
<!--more stuff-->
The error is on the following line of setStateList():
form.state[1].disabled = p_bDisabled;
I realized that I should switch the order of changeCreditCardCountry() and changeCountry() in postOpen() but the code runs fine on the QA box and the development box with the current order. Why am I getting a JavaScript error on the production box and only with Firefox?
Also, note that in some cases I totally hide the credit card section. In this case the page only has one state select so the function setStateList() handles the scenario where the page only has one state select.
Start Free Trial
