Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 5th, 2012  |  syntax: None  |  size: 4.06 KB  |  hits: 11  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. PHP - Updating values in drop down list upon user input
  2. <?php
  3. $conn = mysql_connect("127.0.0.1","root","")
  4. mysql_select_db(MyApp,$conn);
  5.  
  6.  
  7. $sql2=("SELECT App.AppName FROM App);              
  8.  
  9.  
  10. $result2=mysql_query($sql2);
  11. echo '<select name="sublist">';
  12. echo '<option value=""></option>';
  13.  
  14. while ($row2 = mysql_fetch_assoc($result2))
  15. {
  16.     echo '<option value="' . $row2['AppName'] . '">' . $row2['AppName']. '</option>';
  17. }
  18. echo '</select>';                                          
  19. ?>
  20.        
  21. function getXMLObject()  //XML OBJECT
  22.     {
  23.        var xmlHttp = false;
  24.        try {
  25.          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
  26.        }
  27.        catch (e) {
  28.          try {
  29.            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
  30.          }
  31.          catch (e2) {
  32.            xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
  33.          }
  34.        }
  35.        if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  36.          xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
  37.        }
  38.        return xmlHttp;  // Mandatory Statement returning the ajax object created
  39.     }
  40.  
  41.     var xmlhttp = new getXMLObject();   //xmlhttp holds the ajax object
  42.  
  43.     function makeAjaxRequest(url, params, output, image) {
  44.       var getdate = new Date();  //Used to prevent caching during ajax call
  45.       if( image == 1 ){
  46.           document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>';
  47.       }
  48.       if(xmlhttp) {
  49.         xmlhttp.open("POST",url,true); //calling testing.php using POST method
  50.         xmlhttp.onreadystatechange = function(){
  51.            if (xmlhttp.readyState == 4) {
  52.              if(xmlhttp.status == 200) {
  53.                document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element
  54.              }
  55.              else {
  56.     //          alert("Error during AJAX call. Please try again");
  57.              }
  58.            }    
  59.         }
  60.         xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  61.         xmlhttp.send(params); //Posting txtname to PHP File
  62.       }
  63.     }
  64.  
  65.     function makeAjaxGetRequest(url, output, image) {
  66.       var getdate = new Date();  //Used to prevent caching during ajax call
  67.       if( image == 1 ){
  68.           document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>';
  69.       }
  70.       if(xmlhttp) {
  71.         xmlhttp.open("GET",url,true); //calling testing.php using GET method
  72.         xmlhttp.onreadystatechange = function(){
  73.            if (xmlhttp.readyState == 4) {
  74.              if(xmlhttp.status == 200) {
  75.                document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element
  76.              }
  77.              else {
  78.     //          alert("Error during AJAX call. Please try again.");
  79.              }
  80.            }    
  81.         }
  82.         xmlhttp.send(null); //Posting txtname to PHP File
  83.       }
  84.     }
  85.  
  86.     function emptyAjaxReportBox(id)
  87.     {
  88.         document.getElementById(id).innerHTML= '';
  89.     }
  90.        
  91. // your call file; what you posted above.  Obviously change the names and Id's to match what you need.
  92. <form  id="testFormId"  name="testForm"  action="post" >
  93. <select  id="firstSelectId"  name="firstSelect"  onchange="makeAjaxRequest('url', 'firstSelect='+encodeURIComponent(document.getElementById('firstSelectId').value),'outputDivId', '0');" >
  94. </select>
  95. <div  id="outputDivId" >
  96. <select name="secondInput">Whatever values you want to load up can go in here.  They can be the default values; meaning, if select 1 value = 0, then you have have these values in select 2.  Once you change select 1, this will disappear and be replaced by what your ajax returns.  Therefore, for easy processing after you submit the form, you should make this select 2 the same name and id as what you use in the ajax.</div>
  97. </form>
  98.        
  99. //your AJAX file needs to be a separate page than what you're currently reading.  Put whatever you want in there.
  100. $db = connectioninfo;
  101. $query;
  102. echo 'What you put in the echo is what will show up in the outputDiv.  <select></select>';