How to make context-sensitive forms with Ajax and Prototype (page 3 of 4)

Search

Topics

Home

How To

About

Subscribe in a reader

Other IzziDs

Site Map -- Disclaimer

How to make context-sensitive forms with Ajax and Prototype

(page 3 of 4)

Notice in our html <select> form element, we use onchange to call a function update_div() whenever a user makes a selection from the pulldown menu. The update_div() function's job is to figure out what form elements we need for the requested feature and to display the relevant form for that feature. As I mentioned above, one way to do this is to use a DHTML approach where we store every possible form for all of our features. That approach would work fine here where we only have five features. But the goal of this article is to use ajax to make a more scalable solution to this problem.

For the asynchronous javascript part of our javascript code we're going to use the prototype library. With the prototype library, it's pretty easy to accomplish our task with very little javascript code:

<--
function update_div(pane_id, id) {
        var pane_name = "testpane";
	var url = "/2007/Sept/Dynamic_Ajax_Forms/ajax_forms.php";
        pane_name += pane_id;
	var pars = 'feature_id=' + id + '&pane_id=' + pane_id;
	new Ajax.Updater(pane_name, url, 
		{ 
			method: 'get', 
			parameters: pars
		}
	);
}
-->

Remember our javascript function update_div() is called from each select form element. When we call this function in our html, we pass the pane_id of our <div> element as the first variable and the user's selection option (id) as the second variable. Our javascript function passes the user's selection id to a php program that we will describe below. The purpose of this php program is to output the the relevant form information (in html) to the relevant <div> pane specified by pane_id. We use the prototype function Ajax.Updater() for this task.

Ajax.Updater() is an incredibly useful function in the prototype library. You pass it the name of an element in the DOM and a url, and it retrieves the data the url returns and places it into the DOM element you specify. You name these DOM elements in your html using the id tag. In our html above, we named the two <div> elements testpane1 and testpane2. We then pass these names to the Ajax.Updater() function.

Finally, we need the php code that returns the html specifying the form elements relevant for the user-selected feature.

<?php

if (isset($_REQUEST['feature_id'])) {  # feature id selected by user
   $feature_id = $_REQUEST['feature_id'];
   # this refers to where the information came from on the html page
   $pane_id = $_REQUEST['pane_id'];
   # don't draw a form for feature id 0;
   # feature id 0 occurs if the user reselects the "List of features"
   if ($feature_id == 0) {
     echo "";
     exit(0);
   }
   else {
      write_form_info($feature_id, $pane_id);
   }
}
else {
   echo "Error: you need a feature_id.";
}

function write_form_info($fid, $pid) {
   # all of our form element names will have this basename as the root
   # this way, when a form has several elements we can figure out where
   # the came from
   $basename = "testpane$pid";

   # provide a way to determine the feature id when the form is submitted
   echo "<input type=hidden name=$basename" . "feature_id value=$fid>";

   # both "price" and "mileage" are numeric
   if ($fid == 1 || $fid == 2) {
      if ($fid == 1) { echo "<i>Price</i>"; }
      else { echo "<i>Mileage</i>"; }
      # name is testpaneNmin where N is the pane_id
      echo " less than: <input type=text size=7 name=$basename" . "min>";
   }
   else if ($fid == 3) {
      echo "<i>Color</i>";
      echo " any of:<BR>";
      echo "<input type=checkbox name=$basename" . "red> red<BR>";
      echo "<input type=checkbox name=$basename" . "black> black<BR>";
      echo "<input type=checkbox name=$basename" . "green> green<BR>";
      echo "<input type=checkbox name=$basename" . "silver> silver<BR>";
   }
   else if ($fid == 4 || $fid == 5) {
      if ($fid == 4) { echo "<i>Chrome wheels</i>:<BR>"; }
      else { echo "<i>Anti-lock brakes</i>:<BR>"; }
      echo "<input type=radio name=$basename" . "decision value=yes>Yes";
      echo "<input type=radio name=$basename" . "decision value=no> No";
   }
   else {
      echo "";
   }
}
?>

Our php code retrieves the feature_id and pane_id, which were passed via GET from the Ajax.Updater asynchronous javascript function. After a few simple error checks, we call write_form_info(), which will generate the html to draw the forms. We define a basename which is mainly our pane_id. By placing this basename as the prefix to all of the names for <input> elements, any script passed the form data can group the relevant form data together. For example if the user was interested in color and selected green and red from testpane1, the form would pass testpane1red=1&testpane1green=1. The testpane1 prefix allows the receiving script to know that red and green were both selected from the same pane. While the hidden value testpane1feature_id lets the script know that the user was using the car color form (i.e. feature_id=3).

Ok, now we have group of scripts and files that allows our user to dynamically switch forms. Those forms are generated on-the-fly by our php script and are not stored and hidden in our original html. In a real situation, your php script would most likely be tied to a database with the information that it could use to determine which type of form to generate for each feature. But there are plenty of php/mysql tutorials on the web to teach you that. Also, I should mention that you don't have to use php. The url called by Ajax.Updater() can be any valid url that returns the relevant form information.

Although we've used a number of different languages and technologies, we haven't written very much code. If some of what we've done to this point seems difficult, it's probably because I used a language or technology that you're unfamiliar with. Herein lies the problem with Ajax-coding. Ajax is not a difficult language. Ajax isn't a language at all. Ajax is simply stringing together a bunch of different technologies to improve your user's web-experience. But to really understand Ajax and develop your own applications, you need at least a decent understanding of: html, css, dhtml, and (particularly) javascript.

Previous Page | Next Page

Skip to page: 1 | 2 | 3 | 4