Jump to content

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


gagan22

Recommended Posts

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.