Auto-Populate Triple Drop Down Box

[Andrew777]

Hi Guys,

I'm trying to create an ad section on a member website so people can post daily ads like craigslist....

but I'm having trouble with the location selection...

 

I found this tutorial online (in the javascript and php below). It autopopulates three drop down boxes based on the country, then state, then city, all from the database tables (country, state, city)...

 

It works great for populating the dropdown boxes BUT I can't figure out how to take the Country Value from the Form, and the 2 strings retrieved from the DB (Like USA, California, Los Angeles) and put them into my db "dailyads" table (in to the respective fields of course - country, state, city)??

 

Any help would be really appreciated...

 

Here is the code from the tutorial.

 

The Javascript.........................

<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 protected]
// 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>

 

 

My PHP............................

<?php
if(isset($_REQUEST['sub'])){

        $country=$_REQUEST['country'];
$state=$row['state'];
$city=$row['city'];
$sql="INSERT INTO dailyads(country,state,city) values('$country','$state','$city')";
$rs=mysql_query($sql);
echo "Thank you, your location has been submitted!";
}
?>

<form method="post" action="" name="form1">
<table width="400px" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100">Country</td>
    <td  width="300"><select name="country" onChange="getState(this.value)">
<option value="">Select Country</option>
<option value="1">USA</option>
<option value="2">Canada</option>
    <option value="3">United Kingdom</option>
    <option value="4">France</option>
        </select></td>
  </tr>
    <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr style="">
    <td>State</td>
    <td ><div id="statediv"><select name="state" >
<option>Select Country First</option>
        </select></div></td>
  </tr>
    <tr>
    <td> </td>
    <td> </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 style="">
    <td colspan="2"><input type="submit" name="sub" id="sub" value="Submit"></td>
  </tr>
</table>
</form>

[teynon]

Might we see the ajax pages codes (findState.php / findCity.php)

[Andrew777]

Ooops.. sorry, forgot to include those... thanks.

 

 

 

Here is the findState.php.........................

<?php 
$country=intval($_GET['country']);

include "../includes/mysql_connect.php";
$query="SELECT id,statename FROM state WHERE countryid='$country'";
$result=mysql_query($query);

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

 

 

And here is the findCity.php page.......................

<?php
$countryId=intval($_GET['country']);
$stateId=intval($_GET['state']);

include "../includes/mysql_connect.php";
$query="SELECT id,city FROM city WHERE countryid='$countryId' AND stateid='$stateId'";
$result=mysql_query($query);

?>
<select name="city">
<option>Select City</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['city']?></option>
<? } ?>
</select>

 

[teynon]

$country=$_POST['country'];
$state=$_POST['state'];
$city=$_POST['city'];

[Andrew777]

Thanks Teynon, but unfortunately that doesn't grab the values either and put them into my database.

 

Any other help would be appreciated...

 

[teynon]

Put this and see what it says. You need to do some debugging and figure out the following:

 

What variables are being submitted through the form to the next page. Once you determine that they are being sent, then you can save the values. Then, you need to reference the values correctly.

 

<?php
print_r($_POST);
if(isset($_REQUEST['sub'])){

        $country=$_REQUEST['country'];
$state=$row['state'];
$city=$row['city'];
$sql="INSERT INTO dailyads(country,state,city) values('$country','$state','$city')";
$rs=mysql_query($sql);
echo "Thank you, your location has been submitted!";
}
?>

[Andrew777]

Thanks for your help Teynon...

 

I think I'm gonna do it in list format so I can pass the variable to the next page easier than this format.

 

Thanks though.