Making JavaScript Applications Degrade Gracefully - Assembling all the pieces
(Page 4 of 4 )
As I stated in the previous section, below I listed the complete source code that displays on the browser and the entire online registration form, this time including the interactive combo boxes that you saw before.
The corresponding code listing is as follows:
<!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 - correct 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{
margin: 10px;
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 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);
}
}
}
}
</script>
</head>
<body>
<h1>Example of JavaScript-driven combo box - correct
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>
<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>
That's all for the moment. In this case I attached a small JavaScript application to the previous online registration form that degrades gracefully when scripting has been disabled in the client. Of course, this is only an introductory example, but it does show in a nutshell how to build a basic behavior layer for a sample web page without breaking its functionality when JavaScript is deactivated on the browser.
Final thoughts
In this first article of the series I showed in a step-by-step process how to build an interactive online registration form that uses JavaScript to display an additional combo box on the browser when a user selects a specific option. In this way I demonstrated how a concrete JavaScript application may degrade gracefully when scripting has been disabled in the client.
In the second tutorial of this series, I'm going to provide you with another illustrative example of how to use JavaScript to expand the existing functionality of a given web application. I'm going to show you how to create a dynamic navigational bar.
Now that you've been warned, you won't want to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 6 
