Dynamic Forms Using AJAX and ASP

Have you ever wanted to eliminate all the page reloading that often comes with complex forms and large datasets?

For example if you have got a list of 10 categories with 10 sub-categories each, it is a pain to have a complete round-trip to the server just to load some values into a select box. With AJAX (Asynchronous JavaScript and XML) you can do this easily, removing the overheads of reloading all the data that hasn't changed, providing a better end-user experience du e to faster navigation.

For Example:

Select a Category
Select a Sub-Category

This works by using the onChange event of the select box.

onchange="getSelect('category', this.value, subcatdiv);"

This passes the search type, the value that has been selected, and the destination div where you want the result to appear.

The javascript function the creates an instance of the XMLHTTP object which is used to pull the data from the server side page:

if (typeof window.ActiveXObject != 'undefined' )
   { 
       doc = new ActiveXObject("Microsoft.XMLHTTP");
   } 
   else <
   {
       doc = new XMLHttpRequest();
   }

A Querystring is then constructed and the request is made:


doc.open("GET", "dyn_response.asp?search="+selType+"&str=" + str, false);
doc.send(null);

The response from the server script is then written into the destination div, as passed from the select box.


destination.innerHTML = doc.responseText;

The dyn_response.asp file can be written in any language as long as it provides the desired response text.

A zip of the files used in this example are available for download here:

Download

Downloads: 4009

Hosting by