Advertisement
Guest User

Untitled

a guest
Jul 26th, 2017
125
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.66 KB | None | 0 0
  1. <html>
  2.  
  3. <head>
  4.  
  5. <title>Ajax dropdown code</title>
  6.  
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  8.  
  9.  
  10.  
  11. <script>
  12.  
  13. function getXMLHTTP() { //fuction to return the xml http object
  14.  
  15.         var xmlhttp=false; 
  16.  
  17.         try{
  18.  
  19.             xmlhttp=new XMLHttpRequest();
  20.  
  21.         }
  22.  
  23.         catch(e)    {      
  24.  
  25.             try{           
  26.  
  27.                 xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
  28.  
  29.             }
  30.  
  31.             catch(e){
  32.  
  33.                 try{
  34.  
  35.                 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  36.  
  37.                 }
  38.  
  39.                 catch(e1){
  40.  
  41.                     xmlhttp=false;
  42.  
  43.                 }
  44.  
  45.             }
  46.  
  47.         }
  48.  
  49.            
  50.  
  51.         return xmlhttp;
  52.  
  53.     }
  54.  
  55.    
  56.  
  57.    
  58.  
  59.    
  60.  
  61.     function getCity(strURL) {     
  62.  
  63.        
  64.  
  65.         var req = getXMLHTTP();
  66.  
  67.        
  68.  
  69.         if (req) {
  70.  
  71.            
  72.  
  73.             req.onreadystatechange = function() {
  74.  
  75.                 if (req.readyState == 4) {
  76.  
  77.                     // only if "OK"
  78.  
  79.                     if (req.status == 200) {                       
  80.  
  81.                         document.getElementById('citydiv').innerHTML=req.responseText;                     
  82.  
  83.                     } else {
  84.  
  85.                         alert("There was a problem while using XMLHTTP:\n" + req.statusText);
  86.  
  87.                     }
  88.  
  89.                 }              
  90.  
  91.             }          
  92.  
  93.             req.open("GET", strURL, true);
  94.  
  95.             req.send(null);
  96.  
  97.         }
  98.  
  99.                
  100.  
  101.     }
  102.  
  103.    
  104.  
  105.     function getCountry(strURL) {      
  106.  
  107.        
  108.  
  109.         var req = getXMLHTTP();
  110.  
  111.        
  112.  
  113.         if (req) {
  114.  
  115.            
  116.  
  117.             req.onreadystatechange = function() {
  118.  
  119.                 if (req.readyState == 4) {
  120.  
  121.                     // only if "OK"
  122.  
  123.                     if (req.status == 200) {                       
  124.  
  125.                         document.getElementById('countrydiv').innerHTML=req.responseText;                      
  126.  
  127.                     } else {
  128.  
  129.                         alert("There was a problem while using XMLHTTP:\n" + req.statusText);
  130.  
  131.                     }
  132.  
  133.                 }              
  134.  
  135.             }          
  136.  
  137.             req.open("GET", strURL, true);
  138.  
  139.             req.send(null);
  140.  
  141.         }
  142.  
  143.                
  144.  
  145.     }
  146.  
  147.    
  148.  
  149. </script>
  150.  
  151.  
  152.  
  153.  
  154.  
  155.  
  156.  
  157.  
  158.  
  159. </head>
  160.  
  161.  
  162.  
  163. <body>
  164.  
  165.  
  166.  
  167. <form method="post" action="" name="form1">
  168.  
  169. <table width="60%" border="0" cellspacing="0" cellpadding="0">
  170.  
  171.   <tr>
  172.  
  173.     <td width="150">Country</td>
  174.  
  175.     <td  width="150"><select name="country" onChange="getCity('findcity.php?country='+this.value)">
  176.  
  177.     <option value="">Select Country</option>
  178.  
  179.     <option value="1">USA</option>
  180.  
  181.     <option value="2">Canada</option>
  182.  
  183.         </select></td>
  184.  
  185.   </tr>
  186.  
  187.   <tr style="">
  188.  
  189.     <td>City</td>
  190.  
  191.     <td ><div id="citydiv"><select name="city" onChange="getCountry('findcountry.php?city='+this.value)">
  192.  
  193.     <option>Select City</option>
  194.  
  195.         </select></div></td>
  196.  
  197.   </tr>
  198.  
  199.  
  200.  
  201.  
  202.  
  203.  
  204.  
  205.     <td>Country</td>
  206.  
  207.     <td ><div id="countrydiv"><select name="country2">
  208.  
  209.     <option>Select Country</option>
  210.  
  211.         </select></div></td>
  212.  
  213.   </tr>
  214.  
  215.  
  216.  
  217.   <tr>
  218.  
  219.     <td>&nbsp;</td>
  220.  
  221.     <td>&nbsp;</td>
  222.  
  223.   </tr>
  224.  
  225.   <tr>
  226.  
  227.     <td>&nbsp;</td>
  228.  
  229.     <td>&nbsp;</td>
  230.  
  231.   </tr>
  232.  
  233. </table>
  234.  
  235. </form>
  236.  
  237. </body>
  238.  
  239. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement