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

Bookmark Master - detail AJAX select boxes



AddThis Social Bookmark Button

Step 4 - AJAX master - detail select client side code


Master - detail AJAX select boxes

 

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Ajax Master - detail example</title>
  7. </head>
  8.  
  9. <body>
  10.  
  11. <script language="javascript" type="text/javascript">
  12. <!--
  13. // Get the HTTP Object
  14. function getHTTPObject(){
  15. if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
  16. else if (window.XMLHttpRequest) return new XMLHttpRequest();
  17. else {
  18. alert("Your browser does not support AJAX.");
  19. return null;
  20. }
  21. }
  22.  
  23. // Change the value of the outputText field
  24. function setOutput(){
  25. if(httpObject.readyState == 4){
  26. var combo = document.getElementById('type');
  27. combo.options.length = 0;
  28.  
  29. var response = httpObject.responseText;
  30. var items = response.split(";");
  31. var count = items.length;
  32. for (var i=0;i<count;i++){
  33. var options = items[i].split("-");
  34. combo.options[i] =
  35. new Option(options[0],options[1]);
  36. }
  37. }
  38. }
  39.  
  40. // Implement business logic
  41. function doWork(){
  42. httpObject = getHTTPObject();
  43. if (httpObject != null) {
  44. httpObject.open("GET", "getSubcategory.php?brand="
  45. +document.getElementById('brand').value, true);
  46. httpObject.onreadystatechange = setOutput;
  47. httpObject.send(null);
  48. }
  49. }
  50.  
  51. var httpObject = null;
  52.  
  53. //-->
  54. </script>
  55.  
  56. <form name="testForm" action="">
  57. Select car brand:<br/>
  58. <select name="brand" id="brand" onchange="doWork();">
  59. <option value="Audi">Audi</option>
  60. <option value="BMW">BMW</option>
  61. <option value="Mercedes">Mercedes</option>
  62. <option value="Lexus">Lexus</option>
  63. </select>
  64.  
  65. <br/><br/>Select car type:<br/>
  66. <select name="type" id="type">
  67. <option value="1">A3</option>
  68. <option value="2">A4</option>
  69. <option value="3">A6</option>
  70. <option value="4">A8</option>
  71. </select>
  72. </form>
  73. </body>
  74. </html>
  75.  




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



F1 Site Family
AJAX F1
HTML F1
Java F1
JavaScript F1
PHP 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.0228