Making JavaScript Applications Degrade Gracefully

As I expressed in the section you just read, the interaction between the two combo boxes shown in the previous hands-on example should be achieved in a different way, since its current incarnation is very poor. Therefore, I'm going to define a few simple JavaScript functions which will be responsible for adding dynamically via the DOM the second combo box to the online registration form.

Naturally, in this case the JavaScript functions will degrade gracefully too, since the functionality provided by the online form in question will remain closely the same.

Please take a look at the following group of JavaScript functions. They are tasked with dynamically adding the second combo box to the web document tree:    

function displayCities(formElem){
   var div=document.getElementById('cities');
   if(div){div.parentNode.removeChild(div)}
   else{
     if(formElem.value=='Maine'){
       // create general div container */
       var div=document.createElement('div');
       div.setAttribute('id','cities');
       // create text paragraph
       var par=document.createElement('p');
       par.appendChild(document.createTextNode('Cities '));
       // create combo box
       var sel=document.createElement('select');
       sel.setAttribute('name','cities');
         var cities=new Array('Acton','Bangor','Boothbay',
'Brunswick','Cape Elizabeth','Columbia Falls','Cumberland',
'Dexter','East Boothbay','Falmouth','Gardiner','Gorham',
'Greenville');
       for(var i=0;i<cities.length;i++){
         var option=document.createElement('option');
         option.setAttribute('value',cities[i]);
         option.appendChild(document.createTextNode(cities[i]));
         sel.appendChild(option);
       }
       // append combo box to paragraph
       par.appendChild(sel);
       // append paragraph to general div
       div.appendChild(par);
       // append general div to form
       formElem.parentNode.appendChild(div);
     }
   }
}
window.onload=function(){
   // check if the browser is DOM compatible
  if(document.getElementById
     &&document.getElementsByTagName&&document.createTextNode){
    var states=document.getElementsByTagName('form')[0].elements
[3];
    if(states){
      // trigger 'displayCities' function when 'States' menu
changes
      states.onchange=function(){
        displayCities(this);
      }
    }
  }
}

As shown above, the previous JavaScript functions have been defined in such a way that they can display the combo box containing several Maine cities if a user selects this state in the first menu. Nonetheless, in this case things are slightly different and better, since I didn't use ugly inline styles to show the combo box in  the browser.

So far, so good. At this point I built a simple online registration form that uses a few straightforward JavaScript functions to display an additional combo menu if users eventually select a concrete option. In this case I exemplified this common situation by using the names of some cities and states of the USA, but as you know, this is entirely modifiable and customizable. In addition, the JavaScript code is capable of degrading gracefully if scripting is disabled in the client, since the online registration form will still work with minor modifications.

So, having shown you the definitions for the JavaScript functions for dynamically adding the second combo box to the web document tree, it's time to move on and see how these functions can be linked to the corresponding online form, in this way completing the implementation of this practical example of building a simple JavaScript application that degrades gracefully.

Click on the link that appears below and keep reading.