How i can do this in PHP.......

[gagan22]

Hi all,

I have made 2 drop down box naming client, project .
All values in this drop down box are coming from database. I am fetching all value through sql query. First drop down box is showing all client which are in database. Second drop down box is also showing all project which are in database.

For example, I have three client whose name are sam,due,joy. Each of have these have different project . Like sam have project like pro2, pro3 and due have DTL,Pro1 and joy have pro5,CMM,PPC like this.

Now problem is that when i select First client from drop down then it should only show that project in second drop down box which project come under first client .But this is showing all projects which exists in database.

I do not know what event i will have to use for this . As i think like onchange or onselect event and what type of code i will have to use for these events. If there is another way to solve this problem. So how i can do this . Please help me.
Thanks,
Gagan

[nav33n]

Have an onchange event for the first select box and submit the page. Then use this selected value and query the table and display relevant options in second selectbox.

[gagan22]

hi Naveen,
Thanks for reply.

But i want to do whole this before submit button. because i want to select first drop down box then is should be changed in second drop down box after that i want to use use submit button.

please help me to solve this.

[BzzBee]

Then you have to use ajax

[gagan22]

hi,
thanks for reply,

This is the problem i do not know what code i should use for this in AJAX. Because these all value which are in drop down box exists in database.

Please help me if it is possible by you.

[BzzBee]

yes ajax is simple code available on internet.
the working behind that is like you will select the value from 1st drop down and that value will pass to a new form and that will fetch the values of 2nd dropdown from database and will show at your page without submiting the page

[nav33n]

Yep! Try with w3school's ajax examples. Have an onchange event in first selectbox, which when changed calls an ajax function to query the table (by passing the selected value of the first selectbox) and return respective records.

[gagan22]

hi,
thanks for reply,

I ma using this ajax code for my file. But this is not giving output as my expectation.

<script language="javascript">



function getProjectList(sel)
{
	var category = sel.options[sel.selectedIndex].value;
	document.getElementById('client1').options.length = 0;	// Empty city select box
	if(category.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'test1.php?category='+category;	// Specifying which file to get
		//ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}

</script>

please help me to sove this probem.

[gagan22]

HI all,

Thanks for giving so much cooperation.

Now i am sending you whole my code which i am using . But problem is that i am not getting value in second drop down box when i am selecting one client from first drop down box.

Here is code of ajax which i am using for this implementation:-

<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 getProject(clientId) {		
		
		var strURL="book.php?clientid="+clientId;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('project1').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}		
	}
}
</script>

Here is code for book.php:-which i am calling in ajax file--

<select name="client" id="client" size="0" class="txtbx"  onChange="getProject(this.value)">

                           <option value="" selected ><? echo $row004['1'];?></option> 
						   
						  <?  $sql="select * from cli_em_book group by client asc";

$query=mysql_query($sql,$link);

while($res=mysql_fetch_array($query)){

?>

<option value="<?=$res['id']?>"><?=ucfirst($res['client']);?></option>


<? } ?>

           

            </select></td>
			

            <td width="17%" align="center"><? echo $country=intval($_GET['clientid']); ?><select name="project1" id="project1" class="txtbx" >

              <option value="" selected ><? echo $row004['3'];?> </option>

             <? 
			 $sql="select * from cli_emp_pro_book where c_id='".intval($_GET['clientid'])."' group by project asc";

$query=mysql_query($sql,$link);

while($res=mysql_fetch_array($query)){

?>

<option value="<?=ucfirst($res[project])?>"><?=ucfirst($res[project])?></option>  

<? } ?></select>           


but problem is that as i find it 

it is not giving value of  intval($_GET['clientid'] for this variable.
when i am printing value for this variable it is giving value 0.

Please help me . where i am wrong or what code should i use for this .

It is very urgent for me.

Thanks,
Gagan

[gagan22]

hi all,

i have done so much effort to solve this . But i am not getting result which i need for these multiple select boxes.

Please help me.
how i can solve this.

[Tulsa]

in my project have a same prolem so i solved this using ajax
so may be this useful to u
when user select course from one list box then in another listbox view subject according to selected subject

//update_profile.php file

<select name="list_ug" id="list_ug" onChange="Get_ugspec();">
					 <option value="" >Select</option>
          
     		       <? 										 
										 			 while($row_ug = db_fetch_array($result_ug))
													  {
													  	   $course=$row_ug['ug_course'];
															
		  											  	   if($ug_course ==$course)
														   { ?>
												  <option value='<?=$row_ug['ug_course']?>' selected="selected"> <? echo $row_ug['ug_course']; ?> </option>
												  <? } else { ?>
												  <option value='<?=$row_ug['ug_course']?>'> <? echo $row_ug['ug_course']; ?> </option>
												  <? }									  
												   
											    } ?>
										<option value="Other">Other</option>
						  </select>
//this is list box where course display according to change value from above list box
<select name="list_ugspec" id="list_ugspec" onChange="show_ugspec();" onFocus="Get_ugspec();">
						<option value=""  selected="selected">Select</option>
          
              <? 										 
							while($row_ug_special = db_fetch_array($result_ug_special))
							 {
										  		          // $ug_spec=$row_ug_special['ug_specialization'];
															
		  					 if($ug_spec==$row_ug_special['ug_specialization'])
						     { ?>
							  <option value='<?=$row_ug_special['ug_specialization']?>' selected="selected"> <? echo $row_ug_special['ug_specialization']; ?> </option>
					
							  <? } else { ?>
							  <option value='<?=$row_ug_special['ug_specialization']?>'> <? echo $row_ug_special['ug_specialization']; ?> </option>
							  <? }									  
												    
						 } ?>
		 <option value="Other">Other</option>
		</select>
<script type="text/javascript">	
function GetXmlHttpObject()
{
	var xmlHttp=null;
	try
	{
		// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		// Internet Explorer
		try
		{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}
function Get_ugspec()
{
	//   alert(id);
	  id=document.getElementById('list_ug').value;
	//   alert(id);
	  getugspec(id);
}	
function getugspec(id)
{ 
	 //alert(id);
	xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null)
	{
		alert ("Your browser does not support AJAX!");
		return;
	} 
	
	var url="ug_subject.php?id="+id;

	xmlHttp.onreadystatechange=function() 
	{ 
		if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
		{ 
		//	alert(xmlHttp.responseText);
			document.getElementById("div_ugspec").innerHTML=xmlHttp.responseText;
		}
		else
		{
			document.getElementById("div_ugspec").innerHTML="";
		}
		
	};
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}
</script>

//ug_subject.php called by javascript at onchange event

						   $ug_course=$_GET['id'];
						   $query_ug="select ugs.ug_specialization from fg_ug_specialization ugs,fg_ug_course ugc where ugs.ug_id=ugc.id  and ugc.ug_course='$ug_course'";

					    //	echo "query".$query_ug;
						  $result_ug=db_query($query_ug); 
?>
			        <span id="UGspec">
					    <select id="list_ugspec" name="list_ugspec" onChange="show_ugspec();">
						<option value="" selected="selected">Select</option>
						  <?
						   while($row_ug=db_fetch_array($result_ug))
						   {
						  ?>
						    	<option value="<?=$row_ug['ug_specialization']?>"><?=$row_ug['ug_specialization']?></option>
						<? } ?>
								<option value="Other">Other</option>
						 </select>
          				 		<img src="images/ok.gif" title ="Valid" alt="Valid" class="validMsg" border="0"/>&nbsp;&nbsp;<br>
								 <span class="selectRequiredMsg">Please select U.G. Specialization</span>		
				</span>		
						<? 
						
					//	echo "valu" .$ug_course. $result_ug;
						
						?>

i hope this code helpfull to u

[gagan22]

hi all,

i am sending whole of my code which i am using but problem is that where in url we are passing value .That is not giving from URL.

Let me explain and here i am using three file naming index.php ,findcity.php and findstate.php.............

here is code of index.php

<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 - [email][e-mail][/email]
// If you have any problem contact me at [url]http://roshanbh.com.np[/url]
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</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>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

now the problem is that where i am sending value country in ajax code i am not getting country value there so after that this is not displaying value city and state drop down select.

SO please help me just how i can got value of county

i am usting this $country=$_GET
but when i am printing this value $country in file this is giving 0 value. How i can get this $country value correct from ajax code.

So please help me to solve this.
Thanks,

[Tulsa]

hi
i modified your code
now just you test this code,may be your problem will be solved.
so you need to add get_City() function in the change event of sate listbox in findState.php file
i add get_City() and get_State function on change event of list box where i passed the id of both list box and called the ajax function

<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 - [email][e-mail][/email]
// If you have any problem contact me at [url]http://roshanbh.com.np[/url]

function get_State()
{
	
}
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 Get_State()
{	
	//   alert(id);
	  id=document.getElementById('country').value;
	  alert(id);
	  getState(id);
}	
	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 get_City()
{
	id=document.getElementById('country').value;
	id2=document.getElementById('state').value;
	alert(id);
	getCity(id,id2);
}
	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" id="country" onChange="get_State();">
	<option value="">Select Country</option>
	<option value="1">USA</option>
	<option value="2">Canada</option>
        </select></td>
  </tr>
  <tr style="">
    <td>State</td>
    <td >
    <div id="statediv">
    <select name="state" id="state" onChange="get_City();">
			<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>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

[gagan22]

Hi,

Thanks for so much help. I also tried this code as you give me when i select country from this first drop down box list and there is no value or no text is shown in state and city select drop down box.

I do not know what is the reason behind this. Please help me.

[danishbacker]

Hope your code is not showing any errors.
Also i think u havet tried alerting the "req.responseText" after satus 200
if not try that.

check whether u r getting required output in correct format.
anything inside a list menu will not be displayed if it is not correct format.

have you added a line like the one in below, to get as req.responseText?

echo "<option value='$id'>$project</option>";

or check whether the id u passed as argument in reaching there.

i think checking these two may solve ur problem also try alerting everything u need in a step by step method, it will give u a better control over ajax calls,
u will defenitly know what is happening there.

[gagan22]

Hi all,

when i am running this whole code of all files on localhost on another machine then it is displaying all value or select box value very well.

But when i m running same file in my system FTP or localhost on my system when i am selecting country from first drop down box then it is not showing any value in 2nd and 3rd drop down box..

I am not understanding . Is there any problem in my system wamp or php.ini file

I am thinking that i should copy the php.ini file from another system( where the code is running well) in my system.

is this right or if any other solution is there regarding this. Please suggest me.

Thanks
Gagan

[Tulsa]

hi

I don't think than this code is related to php.ini file.

Hope that your system's browser have a java script enabled
and your system have a table name is same and all file path is also same which u all ready run in another system right.

So how this is possible that on one system code running and another have a not.
u need to check all this code by alerting value which passed by the function and also response.text value which called by the ajax.

[gagan22]

hi,
As you asked me to check it in my system using alert in everyline.

I found that ajax function is not calling by html script in my code. That is the reason i am not getting country id in strURL and it is unable to show the value in 2nd select box.

Ajax function is not calling . Can u please tell me the reason behind this. Please suggest me.

Thanks for so much help.