Master - detail AJAX select boxes - AJAX to get details

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
Product:See complete product

Bookmark Master - detail AJAX select boxes

AddThis Social Bookmark Button

Step 2 - AJAX to get details

Master - detail AJAX select boxes

Now it's time to implement our use case. If you are new in AJAX then it maybe makes sense to read a basic AJAX - PHP tutorial before continue.

First of all we need a HTML form with the 2 select boxes. It is initialized with Audi and it's types as follows:

  1. <form name="testForm" action="">
  2. Select car brand:<br/>
  3. <select name="brand" id="brand" onchange="doWork();">
  4. <option value="Audi">Audi</option>
  5. <option value="BMW">BMW</option>
  6. <option value="Mercedes">Mercedes</option>
  7. <option value="Lexus">Lexus</option>
  8. </select>
  10. <br/><br/>Select car type:<br/>
  11. <select name="type" id="type">
  12. <option value="1">A3</option>
  13. <option value="2">A4</option>
  14. <option value="3">A6</option>
  15. <option value="4">A8</option>
  16. </select>
  17. </form>

In the form the id parameters are important as we will use this later. For the master list we have set a an event listener. So in case of all change event the doWork() function will be called.

The doWork() function is quite simple it just reads out the actual master value and send it to the server. And of course sets the response processor. The code is the following:

  1. function doWork(){
  2. httpObject = getHTTPObject();
  3. if (httpObject != null) {
  4."GET", "getSubcategory.php?brand="
  5. +document.getElementById('brand').value, true);
  6. httpObject.onreadystatechange = setOutput;
  7. httpObject.send(null);
  8. }
  9. }

Now we need to implement the most important part of the code. Don't worry it will be not so complicated.

First of all we need to understand that in this case we will get back a list of items from the server. However we get it as a normal string so it should be in a special format - see server side code later - to process it. The solution is easy, we will separate the items with semicolon and in case of one item we will separate the value from the label with a minus sign. So the result string format looks like this:

  2. A3-1;A4-2;A6-3;A8-4

Processing such a string is easy with the javascript split() function. However first we need to clear the actual list and then process the response and insert each new items into the list. The code is the following:

  1. function setOutput(){
  2. if(httpObject.readyState == 4){
  3. var combo = document.getElementById('type');
  4. combo.options.length = 0;
  6. var response = httpObject.responseText;
  7. var items = response.split(";");
  8. var count = items.length;
  9. for (var i=0;i<count;i++){
  10. var options = items[i].split("-");
  11. combo.options[i] =
  12. new Option(options[0],options[1]);
  13. }
  14. }
  15. }

The rest of the client part is similar to the basic AJAX-PHP tutorial code. 

On the next page we will implement the server side code.

Previous Step of Master - detail AJAX select boxesNext 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
Java F1
JavaScript F1
Developer F1

Family tutorials
PHP Array
PHP8 on Windows10
Not a supported stylesheet mime type

PHP Utils
Latest video courses

Total time: 0.003