does onChange always work if javascript is enabled?

[BoarsHell]

I have some simple code like this...

<label>Country</label>
<select name="Address:Cntry" onChange="javascript: onCountryChange(addressForm['Address:Cntry'].value);">
  <option value="">&lt;Select One&gt;</option>
  <option value="CA">Canada</option>
  <option value="US">United States</option>
</select>

function onCountryChange(country){
  if(country == 'US'){
    changeSelectionOptions('addressForm', 'Address:State', 'State', statesArray(), '');
    document.getElementById("Address:Zip_title").innerHTML = 'Zip Code';
  }else if(country == 'CA'){
    changeSelectionOptions('addressForm', 'Address:State', 'Province', provincesArray(), '');
    document.getElementById("Address:Zip_title").innerHTML = 'Postal Code';
  }
}

function changeSelectionOptions(formName, selectName, selectTitle, optionArray, chooseDefault){
 var i = 0;
 var k = 1;

 //make sure there aren't any options left over from a previous time
 document[formName][selectName].options.length = 0;

 while (i < optionArray.length-1){
    //option name, option value
    if(chooseDefault == optionArray[i+1]){
      document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[i+1], true, true);
    }else{
          document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[i+1]);
        }
    i = i + 2;
    k++;
 }
 document.getElementById(selectName+"_title").innerHTML = selectTitle;
} 

The function onCountryChange changes the option of another select to the states or provinces. I have tested the script successfully in the latest versions of IE, Firefox, Safari, and Netscape.

Once in a while I get complaints from users that the state drop down box stays blank after they change the country. If a user comes to this page without javascript enabled they will be redirected to a page explaining how to enable javascript. So these few complaining users have javascript enabled but it is still not working. Is there anything I can do differently or somehow detect if this script will work in their browser?

I appreciate any suggestions...

Thanks,
Paul

[Declan1991]

Remove the "javascript:" from it. Then it will always call the function, whether the function works or not.

[Kor]

and use lowercase: onchange. An XHTML Doctype needs all the tag names, attributes and events to be in lowercase (XML syntax)

[BoarsHell]

I have implemented both of your suggestions. Thank you.

[BoarsHell]

My last post about this subject was about a month ago and the problem still exists. For most users it works but less than 1% of them still complain that the state drop down box still does not populate automatically.

Does anyone see any problems with this function that would cause it not to work in some browsers (older browsers perhaps?)...

function changeSelectionOptions(formName, selectName, selectTitle, optionArray, chooseDefault){
 var i = 0;
 var k = 1;

 //make sure there aren't any options left over from a previous time
 document[formName][selectName].options.length = 0;

 while (i < optionArray.length-1){
    //option name, option value
    if(chooseDefault == optionArray[i+1]){
      document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[i+1], true, true);
    }else{
          document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[i+1]);
        }
    i = i + 2;
    k++;
 }
 document.getElementById(selectName+"_title").innerHTML = selectTitle;
} 

[BoarsHell]

I found a javascript validator tool at http://www.jslint.com/ that really helped me go through my code. I took all of suggestions provided by the tool and I hope it helps with this problem.

I think a problem may be the way I was using arrays for the states and provinces. I was declaring my arrays like this...

var states = new Array(50);
states[0] = 'Alabama';
states[1] = 'Alaska';
etc...

now instead I am using this notation...

var states = ['Alabama', 'Alaska', etc...];

[Kor]

I think a problem may be the way I was using arrays for the states and provinces. I was declaring my arrays like this...

var states = new Array(50);
states[0] = 'Alabama';
states[1] = 'Alaska';
etc...

now instead I am using this notation...

var states = ['Alabama', 'Alaska', etc...];

It is the same...

It would be of some help if you could tell us which users (on which browsers) can not run the code.

[BoarsHell]

It would be of some help if you could tell us which users (on which browsers) can not run the code.

I would love to have that information! Once in a while I can get that information from complaining users because either they got it to work and are long past the issue or they abandoned the site and I never hear from them again.

Another problem that I recently fixed was a GUI issue. Some users did not realize they had to choose a country before the state or provinces drop down would populate. So I made it obvious that the country needs to be chosen first and that made the number of complaints drop about 90%.

As for the arrays... I understand both ways are the same, but I have read that the first way may not work on older browsers... so I minus well use the way that will definitely work on all javascript enabled browsers.

[toicontien]

I can almost guarantee the people having problems are Internet Explorer users. IE-Win doesn't quite implement the onchange event handler correctly. If you tab to a SELECT, then use the up and down arrow keys to select something, I don't think IE-Win triggers the onchange each time you arrow up or down. I think in that case, IE-Win only triggers the onchange when the SELECT loses focus.

[BoarsHell]

I just tested the site in IE and the tab down and then arrow presses work... but I tested it in the latest IE.

But I can definitely imagine that would be a problem... I am going to test it out in an older IE.

Thanks,
Paul

[BoarsHell]

I have made some progress on this problem. I found that the drop down box stayed blank in Mozilla 1.7 so I finally had a browser to test it out with.

I was introducing problems with this code

//make sure there aren't any options left over from a previous time
document[formName][selectName].options.length = 0; 

Mozilla was successfully setting the select to zero, which clears out all the options, but it would have trouble adding new options to a select that was set to zero.

So my work around is the following code which successfully was tested in IE 6 & 7, Mozilla 1.7, FF 2, Netscape 9, and Safari 3.1

function changeSelectionOptions(formName, selectName, selectTitle, optionArray, chooseDefault) {
    var i = 0;
    var k = 1;

    //******************** REMOVED CODE *****************
    //make sure there are not any options left over from a previous time
    //document[formName][selectName].options.length = 0;
   //*************************************************************


    while (i < optionArray.length - 1) {
        //option name, option value
        if (chooseDefault === optionArray[i + 1]) {
            document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[i + 1], true, true);
        } else {
            document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[i + 1]);
        }
        i = i + 2;
        k = k + 1;
    }
    
    //******************** ADDED CODE *****************
    //make sure there are not any options left over from a previous time
    document[formName][selectName].options.length = k;
   //*************************************************************

    document.getElementById(selectName + "_title").innerHTML = selectTitle;
}