www.webdeveloper.com
Results 1 to 11 of 11

Thread: does onChange always work if javascript is enabled?

  1. #1
    Join Date
    Oct 2005
    Location
    Philadelphia, USA
    Posts
    74

    does onChange always work if javascript is enabled?

    I have some simple code like this...

    HTML Code:
    <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>
    PHP Code:
    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(formNameselectNameselectTitleoptionArraychooseDefault){
     var 
    0;
     var 
    1;

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

     while (
    optionArray.length-1){
        
    //option name, option value
        
    if(chooseDefault == optionArray[i+1]){
          
    document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[i+1], truetrue);
        }else{
              
    document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[i+1]);
            }
        
    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

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Remove the "javascript:" from it. Then it will always call the function, whether the function works or not.

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    and use lowercase: onchange. An XHTML Doctype needs all the tag names, attributes and events to be in lowercase (XML syntax)

  4. #4
    Join Date
    Oct 2005
    Location
    Philadelphia, USA
    Posts
    74
    I have implemented both of your suggestions. Thank you.

  5. #5
    Join Date
    Oct 2005
    Location
    Philadelphia, USA
    Posts
    74
    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?)...

    PHP Code:
    function changeSelectionOptions(formNameselectNameselectTitleoptionArraychooseDefault){
     var 
    0;
     var 
    1;

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

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


  6. #6
    Join Date
    Oct 2005
    Location
    Philadelphia, USA
    Posts
    74
    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...];

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by BoarsHell

    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.

  8. #8
    Join Date
    Oct 2005
    Location
    Philadelphia, USA
    Posts
    74
    Quote Originally Posted by Kor
    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.

  9. #9
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    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.

  10. #10
    Join Date
    Oct 2005
    Location
    Philadelphia, USA
    Posts
    74
    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

  11. #11
    Join Date
    Oct 2005
    Location
    Philadelphia, USA
    Posts
    74
    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
    PHP 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
    PHP Code:
    function changeSelectionOptions(formNameselectNameselectTitleoptionArraychooseDefault) {
        var 
    0;
        var 
    1;

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


        
    while (optionArray.length 1) {
            
    //option name, option value
            
    if (chooseDefault === optionArray[1]) {
                
    document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[1], truetrue);
            } else {
                
    document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[1]);
            }
            
    2;
            
    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;


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles