[SOLVED] two drop down.

[girlzz]

where can i learn about using ajax to make two drop down list to retrive data from database??

[secoxxx]

do you mean chained select boxes?

[girlzz]

yup

[girlzz]

any one??

[NathanLedet]

I use this script, although I wish I knew where I got it from so I could give proper credit...I'm thinking w3schools may have had something to do with it

 

Inside my main page, I have a form.

 

<select name="clients" onchange="showProject(this.value)">
<option value="">Select a Client</option>
<?php
   			include('includes/mysql_connect.php');
      			$query = 'SELECT id, clientName FROM client';
		while ($row = mysql_fetch_array($result, MYSQL_NUM)){
				echo "<option value=\"$row['id']\">$row['clientName']</option>\r";
			}			
			?>
</select>

 

This is our script that populates the first "select" field.

 

But then, based on your selection, I needed it to bring up another "select" field, with projects that belong to that specific client.

 

Below </select>, I have a div with the ID of getProject

<div id="getProject"></div>

 

In my header, I have my JS:

<script language="javascript" src="selectedclient.js"></script>

 

var xmlHttp

function showProject(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getProject.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 || xmlHttp.readyState=="complete")
{ 
document.getElementById("getProject").innerHTML=xmlHttp.responseText 
} 
}

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;
}

 

and then I have one more file, getProject.php

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'username', 'password');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("dbname", $con);

$sql="SELECT  projectID, projectName FROM project WHERE clientID = '".$q."'";

$result = mysql_query($sql) or die('Error, query failed');


echo 'Select a Project:';
echo '<select name="optproject">';
echo '<option>Select a Project</option>';

			while ($row = mysql_fetch_array($result)){
				echo "<option name=\"projects\" value=\"" . $row['projectID'] . "\">" . $row['projectName'] . "</option>";
			}


			echo '</select>';


mysql_close($con);
?>

 

I made a bunch of modifications and changes to this script that I've posted, so you may need to make your own modifications to get it properly working.

 

But you should be able to understand what's going on and learn from it.