Using multiple select boxes.......but problem in ajax code

gagan22 · May 23, 2009

hi all,

I am using this ajax code which i am sending here. For making a application for multiple selects.

But when i am selecting first drop down box value then it is showing blank value regarding that it should show some value which come under first select box.

please help me where is i am wrong . But when i am using this code this is not working very well.

<script language="javascript" type="text/javascript">

var xmlhttp;

function getProject(str)

{

xmlhttp=GetXmlHttpObject();

if (xmlhttp==null)

{

alert ("Browser does not support HTTP Request");

return;

}

var url="bookentry1.php";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlhttp.onreadystatechange=stateChanged;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

function stateChanged()

{

if (xmlhttp.readyState==4)

{

//var mySplitResult = xmlhttp.responseText.split("|"); //updated

//document.getElementById("project1").value=mySplitResult[0];

//document.getElementById("id_project").value=mySplitResult[1];

document.getElementById('project1').innerHTML=xmlhttp.responseText;

}

}

function GetXmlHttpObject()

{

if (window.XMLHttpRequest)

{

// code for IE7+, Firefox, Chrome, Opera, Safari

return new XMLHttpRequest();

}

if (window.ActiveXObject)

{

// code for IE6, IE5

return new ActiveXObject("Microsoft.XMLHTTP");

}

return null;

}

</script>

Please help me to solve this problem. I will be very thankful to that person. Because last some days i am facing this problem .But i am unable to solve this.

Thanks

MadTechie · May 23, 2009

code looks okay

but kinda need to see the form and php code that works with it!

gagan22 · May 25, 2009

thanks for help,

ok sir

i am sending code of forms which in which i am using this ajax code. Please try to understand my problem. So that i can solve it . But i am not getting value from 2nd select box when i am selecting first select box.

Here is the code for index.php file-----------

<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">

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="60%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">Country</td>
    <td  width="150"><select name="country" onChange="getState(this.value)">
<option value="">Select Country</option>
<option value="1">USA</option>
<option value="2">Canada</option>
        </select></td>
  </tr>
  
  
  

  <tr style="">
    <td>State<? echo $country=intval($_GET['country']);?></td>
    <td ><div id="statediv"><select name="state">
<option>Select Country First</option>
        </select></div></td>
  </tr>
  <tr style="">
    <td>City</td>
    <td ><div id="citydiv"><select name="city">
<option>Select State First</option>
        </select></div></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
</form>
</body>
</html>

and this is code for findState.php page...........

 
<?php
echo $country=intval($_GET['country']);
echo $name=$country;
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
else 
echo "Successfully connected with database.";

mysql_select_db('db_ajax');
echo $query="SELECT id,statename FROM state WHERE countryid='$country'";
echo "<br>";
echo $result = mysql_query($query,$link) or die('Query failed. ' . mysql_error());  


echo "<select name=state onchange=getCity($country,this.value)>";
echo "<option>Select State </option>";
while($row=mysql_fetch_array($result,MYSQL_BOTH)) { 
echo "<option value=$row[id]>$row[statename]</option>";}

echo "</select>";

?>

here when i am trying to slect country from first select box after selecting first box which country come under the selected country . It is not showing value of state.

when i am trying to print the $_GET['country'] it gives 0

why ??? so please help me to solve this . i will be very thankful to you.

Thanks

MadTechie · May 25, 2009

okay i have broken down your code and re-written it, a little

this runs from 1 file, let me know if theirs any part you don't understand

<?php
if(!empty($_GET['country']))
{
$country=intval($_GET['country']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link)
{
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
if(!empty($_GET['state']))
{
	$state = intval($_GET['state']);
	echo "<option>Select City</option>";
	$query="SELECT id,statename FROM city WHERE countryid='$country' AND stateid='$state'";
}else{
	echo "<option>Select State </option>";
	$query="SELECT id,statename FROM state WHERE countryid='$country'";	
}
$result = mysql_query($query,$link) or die('Query failed. ' . mysql_error());  

while($row=mysql_fetch_array($result,MYSQL_BOTH))
{ 
	echo "<option value=\"{$row['id']}\">{$row['statename']}</option>";
}
exit;
}else{
$country = 0;
}
?>



<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">
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;
}
var country;
function getState(countryId) {      
  
  var strURL="?country="+countryId;
  var req = getXMLHTTP();
  country = countryId;
  if (req) {
     
     req.onreadystatechange = function() {
        if (req.readyState == 4) {
           // only if "OK"
           if (req.status == 200) {                  
              document.getElementById('state').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(stateId) {

  var strURL="?country="+country+"&state="+stateId;
  var req = getXMLHTTP();
  alert(strURL);
  if (req) {
     
     req.onreadystatechange = function() {
        if (req.readyState == 4) {
           // only if "OK"
           if (req.status == 200) {                  
              document.getElementById('city').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="60%" border="0" cellspacing="0" cellpadding="0">
	  <tr>
	    <td width="150">Country</td>
	    <td  width="150">
	    	<select name="country" onChange="getState(this.value)">
	   			<option value="">Select Country</option>
	   			<option value="1">USA</option>
	   			<option value="2">Canada</option>
	        </select>
		</td>
	  </tr>
	  <tr style="">
	    <td>State</td>
	    <td >
	    	<select id="state" name="state" onChange="getCity(this.value)">
				<option>Select Country First</option>
	        </select>
		</td>
	  </tr>
	  <tr style="">
	    <td>City</td>
	    <td >
	    	<select id="city" name="city">
	   			<option>Select State First</option>
	        </select>
		</td>
	  </tr>
	  <tr>
	    <td> </td>
	    <td> </td>
	  </tr>
	  <tr>
	    <td> </td>
	    <td> </td>
	  </tr>
	</table>
</form>
</body>
</html>

gagan22 · May 26, 2009

Hi,

thanks for giving so much help,I have used which code is given by you. But that is also not running well. Actually i am getting some problem that my code is not calling our ajax function.

What reason can be behind this. Please suggest me.

Thanks

MadTechie · May 26, 2009

could be a database problem, when i get home i'll export my table and post it

Sign In

Using multiple select boxes.......but problem in ajax code

Recommended Posts

gagan22

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

gagan22

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

gagan22

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information