Ali
I need to make a dynamic form using php, for example, i will need a list of items which when we select one option another list is modified ( like 2 lists of countries and citys from a dtabase ), and also a radio button wich once clicked we have a new list created on the same form. Thank you very much for your help
August 31, 2012 at 12:46 PM
Here is a php application that creates dependent dropdown lists using Ajax. when the user select country name from the first dropdown, the states belong to that countries will get displayed in second dropdown from database. And when the user select state from the second dropdown, the cities belong to that state will get displayed in third dropdown from database.
1)index.php:
<html>
<script>
function getXMLHTTP() {
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="state.php?country="+countryId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
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="city.php?country="+countryId+"&state="+stateId;
var req = getXMLHTTP();
if (req){
req.onreadystatechange = function() {
if (req.readyState == 4) {
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>
<form method="post" action="" name="form1">
<table>
<tr>
<td>Country</td>
<td><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>
<td>State</td>
<td ><div id="statediv"><select name="state" >
</select></div>
</td>
</tr>
<tr>
<td>City</td>
<td ><div id="citydiv"><select name="city">
</select></div>
</td>
</tr>
</table>
</form>
</html>
August 31, 2012 at 12:50 PM
continue..
2)state.php:
<? $country=intval($_GET['country']);
$link = mysql_connect('localhost', 'root', '');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$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>
3)city.php:
<? $countryId=intval($_GET['country']);
$stateId=intval($_GET['state']);
$link = mysql_connect('localhost', 'root', '');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$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>
For the above code, you need to create following database tables.
CREATE TABLE `country` ( `id` tinyint(4) NOT NULL auto_increment, `country` varchar(20) NOT NULL default '', PRIMARY KEY (`id`) ) ; CREATE TABLE `state` ( `id` tinyint(4) NOT NULL auto_increment, `countryid` tinyint(4) NOT NULL, `statename` varchar(40) NOT NULL, PRIMARY KEY (`id`) ) ; CREATE TABLE `city` ( `id` tinyint(4) NOT NULL auto_increment, `city` varchar(50) default NULL, `stateid` tinyint(4) default NULL, `countryid` tinyint(4) NOT NULL, PRIMARY KEY (`id`) ) ;
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
