Master - detail AJAX select boxes - AJAX master - detail select client side code

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:	71709

Bookmark Master - detail AJAX select boxes

Step 4 - AJAX master - detail select client side code

Master - detail AJAX select boxes

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Master - detail example</title>
</head>
 
<body>
 
<script language="javascript" type="text/javascript">
<!--
// Get the HTTP Object
function getHTTPObject(){
   if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
   else if (window.XMLHttpRequest) return new XMLHttpRequest();
   else {
      alert("Your browser does not support AJAX.");
      return null;
   }
}   
 
// Change the value of the outputText field
function setOutput(){
    if(httpObject.readyState == 4){
        var combo = document.getElementById('type');
        combo.options.length = 0;
 
        var response = httpObject.responseText;
        var items = response.split(";");
        var count = items.length;
        for (var i=0;i<count;i++){
            var options = items[i].split("-");
            combo.options[i] = 
			    new Option(options[0],options[1]);
        }
    }
}
 
// Implement business logic    
function doWork(){    
    httpObject = getHTTPObject();
    if (httpObject != null) {
        httpObject.open("GET", "getSubcategory.php?brand="
                        +document.getElementById('brand').value, true);
        httpObject.onreadystatechange = setOutput;
        httpObject.send(null);
    }
}
 
var httpObject = null;
 
//-->
</script>
 
  <form name="testForm" action="">
     Select car brand:<br/>
     <select name="brand" id="brand" onchange="doWork();">
       <option value="Audi">Audi</option>
       <option value="BMW">BMW</option>
       <option value="Mercedes">Mercedes</option>
       <option value="Lexus">Lexus</option>
     </select>
 
     <br/><br/>Select car type:<br/>
     <select name="type" id="type">
       <option value="1">A3</option>
       <option value="2">A4</option>
       <option value="3">A6</option>
       <option value="4">A8</option>
     </select>
  </form>
</body>
</html>
 
AJAX F1

Previous 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

AJAX F1

Help in AJAX, get AJAX code, scripts, tutorials

Master - detail AJAX select boxes - AJAX master - detail select client side code

Tutorial info:

Bookmark Master - detail AJAX select boxes

Step 4 - AJAX master - detail select client side code

MoocPlayer