How to make context-sensitive forms with Ajax and Prototype (page 2 of 4) But again, if you only have a dozen features or so, this DHTML solution is elegant, user-friendly, and shouldn't be too hard to get working.
Ajax solution Ok now for the point of the article. When you have hundreds to thousands of features, Ajax provides an efficient solution to our problem. We provide the user with a form to select features of interest to them. Once they make their selection, we retrieve, via javascript, the relevant form information for that feature. And we present the form to the user. Like the DHTML solution above, we can do this all in an elegant manner without requiring a page refresh.
Dynamic selection and update of the form elements Our first task is to allow the user to choose the feature(s) they're interested in. Upon making their selection, we'll update a pane in our webpage with the relevant form. Let's first make the html for our dynamic ajax forms page:
<html>
<head>
<title>Ajax dynamic forms example</title>
<link rel="stylesheet" type="text/css" href="ajax_forms.css">
<script type="text/javascript" src="ajax_forms.js"></script>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<form onsubmit="return check_form()">
<input type=Submit><BR><BR>
<table border=0 cellpadding=0 cellspacing=0 height=100%>
<tr height=10 valign=top>
<td>
<select class=small name="testpulldown" size=1
onchange="update_div(1,this.options[this.selectedIndex].value);">
<option value=0>List of features
<optgroup label="General">
<option value=1>price
<option value=2>mileage
<optgroup label="Exterior">
<option value=3>color
<option value=4>chrome wheels
<optgroup label="Safety Features">
<option value=5>anti-lock brakes
</optgroup>
</select>
</td>
<td>
<select class=small name="testpulldown" size=1
onchange="update_div(2,this.options[this.selectedIndex].value);">
<option value=0>List of features
<optgroup label="General">
<option value=1>price
<option value=2>mileage
<optgroup label="Exterior">
<option value=3>color
<option value=4>chrome wheels
<optgroup label="Safety Features">
<option value=5>anti-lock brakes
</optgroup>
</select>
</td>
</tr>
<tr><td><div id=testpane1 class=testpane>Select a feature from the list</div></td>
<td><div id=testpane2 class=testpane>Select a feature from the list</div></td>
</tr>
</table>
</form>
</body>
</html> That's quite a bit of html, but most of it is just formatting. The heart of the html is the two <div> elements. These are our blank slates that we can update with our form elements after the user makes their feature selection. We use a pulldown <selection> form element to allow the user to select the feature they want to query. I've placed two <div> elements and two pulldowns, so you can see how the code works with more than one feature selection. You can modify this to any N feature selections by adding more pulldowns and more <div> elements.
We also have a small css file, ajax_forms.css, that defines the look of our page. The main thing to note here is the div.testpane, which defines the area we will subsequently fill with our form elements.div.testpane {
font-family:sans-serif;
font-size:12px;
background-color:#DDD;
width:250px;
height:100%;
padding:4px;
}
select.small {font-size:11px;}
A.stand:link { color: #2144AA; text-decoration: none; font-size:13px; }
A.stand:active { color: #2F3F53; text-decoration: none; font-size:13px;}
A.stand:visited { color: #2144AA; text-decoration: none; font-size:13px;}
A.stand:hover { color: #817D62; }
TD.small { font-family:sans-serif; font-size:11px;}
Now we need a little javascript code...
Previous Page | Next Page
Skip to page: 1 | 2 | 3 | 4
|
Subscribe in a reader