Ajax, php populate.

Discussion in 'PHP' started by baris22, Jan 15, 2010.

  1. #1
    hello,

    I managed to populate data from database into selectbox using ajax but i could not managed to have the same data in the text area.

    Can anybody help me please.

    
    
    <html>
    <head>
    <title>Roshan's Triple Ajax dropdown code</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="javascript" type="text/javascript">
    // Roshan's Ajax dropdown code with php
    // This notice must stay intact for legal use
    // Copyright reserved to Roshan Bhattarai - nepaliboy007@yahoo.com
    // If you have any problem contact me at http://roshanbh.com.np
    function getXMLHTTP() { //fuction to return the xml http object
    		var xmlhttp=false;	
    		try{
    			xmlhttp=new XMLHttpRequest();
    		}
    		catch(e)	{		
    			try{			
    				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			catch(e){
    				try{
    				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    				}
    				catch(e1){
    					xmlhttp=false;
    				}
    			}
    		}
    		 	
    		return xmlhttp;
        }
    	
    	function getState(countryId) {		
    		
    		var strURL="findState.php?country="+countryId;
    		var req = getXMLHTTP();
    		
    		if (req) {
    			
    			req.onreadystatechange = function() {
    				if (req.readyState == 4) {
    					// only if "OK"
    					if (req.status == 200) {						
    						document.getElementById('statediv').innerHTML=req.responseText;						
    					} else {
    						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
    					}
    				}				
    			}			
    			req.open("GET", strURL, true);
    			req.send(null);
    		}		
    	}
    	function getCity(countryId,stateId) {		
    		var strURL="findCity.php?country="+countryId+"&state="+stateId;
    		var req = getXMLHTTP();
    		
    		if (req) {
    			
    			req.onreadystatechange = function() {
    				if (req.readyState == 4) {
    					// only if "OK"
    					if (req.status == 200) {						
    						document.getElementById('citydiv').innerHTML=req.responseText;						
    					} else {
    						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
    					}
    				}				
    			}			
    			req.open("GET", strURL, true);
    			req.send(null);
    		}
    				
    	}
    </script>
    </head>
    <body>
    <form method="post" action="" name="form1">
    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="150">Country</td>
        <td  width="150">
        
        
        
        <? $countryId=intval($_GET['country']);
    $stateId=intval($_GET['state']);
    $link = mysql_connect('localhost', 'root', 'emre'); //changet the configuration in required
    if (!$link) {
        die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('db_ajax');
    $query="SELECT id, country FROM country ";
    $result=mysql_query($query);
    
    ?>
    <select name="country" onChange="getState(this.value)">
    <option>Select City</option>
    <? while($row=mysql_fetch_array($result)) { ?>
    <option value="<?=$row['id']?>"><?=$row['country']?></option>
    <? } ?>
    </select>        </td>
        <td  width="150" align="center">State</td>
        <td  width="150"><div id="statediv"><select name="state" >
    	<option>Select Country First</option>
            </select></div></td>
        <td  width="150" align="center">City </td>
        <td  width="150"><div id="citydiv"><select name="city">
    	<option>Select State First</option>
            </select></div></td>
      </tr>
    </table>
    
    <table width="600" align="center">
      <tr>
        <td><label>
          <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
        </label></td>
      </tr>
    </table>
    </form>
    </body>
    </html>
    
    
    
    PHP:
     
    baris22, Jan 15, 2010 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    Have you tried document.getElementById('textarea').value=req.responseText;?
     
    s_ruben, Jan 16, 2010 IP
  3. jestep

    jestep Prominent Member

    Messages:
    3,659
    Likes Received:
    215
    Best Answers:
    19
    Trophy Points:
    330
    #3
    You may want to look into a javascript framework. They make tasks like this really easy. Prototype, Mootools, and Jquery are 3 of the more popular ones.

    Usually the easiest way is to have the PHP script return JSON data, which javascript can easily parse and properly complete the form or fields.
     
    jestep, Jan 16, 2010 IP