Master - detail AJAX select boxes


Home - Tutorials - AJAX basic tutorials

In this tutorial I will present you how to create a master - detail select box in your forms. Select one item from the master field and the details will be filled accordingly to your selection.

Tutorial info:


Name:Master - detail AJAX select boxes
Total steps:4
Category:AJAX basic tutorials
Date:2007-11-16
Level:Normal
Product:See complete product
Viewed:58509

Bookmark Master - detail AJAX select boxes



AddThis Social Bookmark Button

Step 1 - The master - detail concept


Master - detail AJAX select boxes

Time to time you need to create web forms where your visitors can select first a main category and then a subcategory. Think a bit, it is not so easy to implement this solution. Why? You need to fill the first (master) list and the second (detail) list as well. However at design time you don't know which value is selected in the master list so how you should fill the detail page?

Let's see an example:

Main category items:

And the subcategories are:

So to fill the master list is quite simple, just add the 4 car brand to the list as here:

Code:
  1. <select name="brand" id="brand" onchange="doWork();">
  2. <option value="Audi">Audi</option>
  3. <option value="BMW">BMW</option>
  4. <option value="Mercedes">Mercedes</option>
  5. <option value="Lexus">Lexus</option>
  6. </select>
  7.  

In case of the detail list we have the problem what items to add. If Audi is the first then the detail select box should look like this:

Code:
  1. <select name="type" id="type">
  2. <option value="1">A3</option>
  3. <option value="2">A4</option>
  4. <option value="3">A6</option>
  5. <option value="4">A8</option>
  6. </select>

But if the visitor made any changes in the master list then our detail list items still the same.

And here comes AJAX to help us. We will send a message to the server when the visitor have changed the value of the master select box. The server will construct a list of relevant detail items and sends back to the browser. Afterwards the browser assigns this list to the detail list.

Now let's see how to implement it.




Next Step of Master - detail AJAX select boxes


Tags: ajax select box, ajax master detail, master detail select box

Master - detail AJAX select boxes - Table of contents
Step 1 - The master - detail concept
Step 2 - AJAX to get details
Step 3 - AJAX server side script
Step 4 - AJAX master - detail select client side code



F1 Site Family
AJAX F1
CSS F1
Database F1
Flash F1
HTML F1
Java F1
JavaScript F1
PhotoShop F1
PHP F1
Scripts F1
Tutorial F1
Windows F1

Family tutorials
PHP Array
PHP Redirect
PHP Session
MySQL Create User
Mysqldump Example
MySQL Concat
JavaScript String
JavaScript Timeout
JavaScript Tooltip

Total time: 0.0324