Making JavaScript Applications Degrade Gracefully - Working with combo boxes to extend a site's behavior with JavaScript
(Page 2 of 4 )
Undoubtedly, a good place to start demonstrating how a concrete JavaScript application can be conceived from its very beginning to degrade gracefully under specific client-side conditions consists of building a typical online registration form where users are prompted to enter their postal addresses as part of the overall registration process.
In this case, the registration form could contain a simple combo box, populated with the names of some states in the USA. However, to make the registration process a bit more interactive, I'd like to dynamically display on the browser an additional combo box when users select “Maine” as the state they're living in. In this case, the extra combo box will show the name of some cities in Maine, making the whole registration procedure slightly more interactive.
Of course, this is obviously an example, so you're free to code your combo boxes to suit your personal requirements. But for now, suppose that the registration procedure will be performed this way. So, having said that, below I listed the definition of a simple (X)HTML file, which includes a short JavaScript snippet for dynamically displaying the combo boxes.
Here's the file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of combo box- incorrect implementation</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 20px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
p{
font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
color: #000;
}
#formcontainer{
width: 300px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #9cf;
text-align: right;
}
</style>
<script language="javascript">
function toogleCitiesVisibility(formElem){
var citycont=document.getElementById('citycontainer');
if(!citycont){return};
if(citycont.style){
citycont.style.display=formElem.value==
'Maine'?'block':'none';
}
}
window.onload=function(){
if(document.getElementById
&&document.getElementsByTagName
&&document.createTextNode){
var states=document.getElementsByTagName('form')
[0].elements[3];
if(states){
states.onchange=function(){
toogleCitiesVisibility(this);
}
}
}
}
</script>
</head>
<body>
<h1>Example of JavaScript-driven combo box - incorrect
implementation</h1>
<div id="formcontainer">
<form action="processform.php" method="post">
<p>First Name <input type="text" name="fname"></p>
<p>Last Name <input type="text" name="lname"></p>
<p>Email <input type="text" name="email"></p>
<p>State
<select name="state">
<option value="Florida">Florida</option>
<option value="Nevada">Nevada</option>
<option value="Texas">Texas</option>
<option value="California">California</option>
<option value="South Carolina">South Carolina</option>
<option value="North Carolina">North Carolina</option>
<option value="New York">New York</option>
<option value="Ohio">Ohio</option>
<option value="Maine">Maine</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Washington">Washington</option>
<option value="Indiana">Indiana</option>
<option value="Colorado">Colorado</option>
</select>
</p>
<div id="citycontainer" style="display: none;">
<p>City
<select name="city">
<option value="Acton">Acton</option>
<option value="Bangor">Bangor</option>
<option value="Boothbay">Boothbay</option>
<option value="Brunswick">Brunswick</option>
<option value="Cape Elizabeth ">Cape
Elizabeth</option>
<option value="Columbia Falls">Columbia
Falls</option>
<option value="Cumberland">Cumberland</option>
<option value="Dexter">Dexter</option>
<option value="East Boothbay">East Boothbay</option>
<option value="Falmouth">Falmouth</option>
<option value="Gardiner">Gardiner</option>
<option value="Gorham">Gorham</option>
<option value="Greenville">Greenville</option>
</select>
</p>
</div>
<p>Enter your comments below:</p>
<p><textarea name="comments" rows="8"
cols="20"></textarea></p>
<p><input type="submit" name="send" value="Send
Data" /></p>
</form>
</div>
</body>
</html>
As you can see, the above (X)HTML file includes a basic registration web form, where users are able to specify different states of the United States as part of their corresponding postal addresses. However, when the option “Maine” is selected in the first combo box, an additional one will be displayed on the browser to allow visitors specify one city from that state. Quite simple, right?
I'd like you to pay close attention to the approach followed previously to dynamically display the second combo box in the browser. In this case, an ugly inline “style” attribute has been assigned to the combo box, simply to hide it initially from visitors, and logically display it via JavaScript, if users eventually select the state of Maine as their choice.
As you might guess, the implementation for the previous pair of combo boxes might degrade gracefully if scripting is disabled in the client, since visitors will only be able to enter the name of the state they're living (not the cities of Maine), but the functionality of the registration form will remain nearly the same.
However, it should be noticed that the above approach for building the interactive combo boxes is rather inefficient since it relies upon the CSS “display” property to show and display the second menu included in the registration form.
Therefore, considering this important issue, in the course of the upcoming section I'm going to show you how to build the same combination of drop-down boxes, which will degrade gracefully if a user has disabled scripting on the browser, but this time using some DOM-based JavaScript functions.
Want to see how this will be achieved? Please, click on the link below and keep reading.
Next: Making JavaScript degrade gracefully >>
More JavaScript Articles
More By Alejandro Gervasio
/ 6 
