Here is all Codes below to show the full tutorial to create a Drop/Down List menu item with Ajax and PhP. All what you need at least Wamp server or any other compatible to your operating system. I will provide on main php file which will have Html code and some php on it. Second will the code.php and third will be the SQL database and with all dummy data installed on but if you have knowledge in php and mysql you can your self create database and tables on it.Here is the preview for the tutorial:
Here is the Code for first php file below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function Action(link,md)
{
var obj,url;
url="dcode.php?mode="+md+"&id="+link+"&r="+Math.random();
try {
obj=new XMLHttpRequest();
}
catch(e)
{
try {
obj=new ActivexObject("Microsoft.XMLHTTP");
}
catch(e) {
alert(e);
}
}
obj.open("GET",url,true);
obj.send(null);
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
var res=obj.responseText;
if(md=='city')
{
document.getElementById("market").innerHTML=res;
}
else {
document.getElementById("city").innerHTML=res;
}
}
}
}
</script>
</head>
<body>
<form action="" method="get">
<table width="200" border="1" align="center">
<tr>
<th scope="row"><label>
<select name="state" id="state" style="width:150px;" onchange="Action(this.value,'state')">
<?
mysql_connect("localhost","root","") or die("check server");
mysql_select_db("students")or die("check database");
$str="select sno,sname from state";
$rs=mysql_query($str);
while(list($scode,$stname)=mysql_fetch_array($rs))
{
echo "<option value='$scode'>$stname</option>";
}
?>
</select>
</label></th>
</tr>
<tr>
<th scope="row"><label>
<select name="city" id="city" style="width:150px;" onchange="Action(this.value,'city')">
</select>
</label></th>
</tr>
<tr>
<th scope="row"><select name="market" id="market" style="width:150px;">
</select></th>
</tr>
</table>
</form>
<script type="text/javascript">
Action(101,'state');
</script>
</body>
</html>
Here is the code file below:
<?
mysql_connect("localhost","root","") or die("check server");
mysql_select_db("students")or die("check database");
if($_REQUEST["mode"]==state)
{
$id=$_REQUEST["id"];
$str="SELECT citycode,cityname
FROM city
WHERE statecode
IN (
SELECT statecode
FROM city
JOIN state ON city.statecode = $id)";
$rs=mysql_query($str);
while(list($citycode,$cityname)=mysql_fetch_array($rs))
{
echo "<option value='$citycode'>$cityname</option>";
}
}
if($_REQUEST["mode"]==city)
{
$cid=$_REQUEST["id"];
$str="SELECT mcode,mname
FROM market
WHERE citicode
IN (
SELECT citicode
FROM market
JOIN city ON market.citicode = $cid)";
$rs=mysql_query($str);
while(list($mcode,$mname)=mysql_fetch_array($rs))
{
echo "<option value='$mcode'>$mname</option>";
}
}
?>
here is the simple database created by me:
-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Apr 16, 2012 at 07:27 PM
-- Server version: 5.1.36
-- PHP Version: 5.3.0
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Database: `students`
--
-- --------------------------------------------------------
--
-- Table structure for table `city`
--
CREATE TABLE IF NOT EXISTS `city` (
`Citycode` int(10) NOT NULL AUTO_INCREMENT,
`statecode` int(10) NOT NULL,
`Cityname` varchar(20) NOT NULL,
PRIMARY KEY (`Citycode`),
UNIQUE KEY `Cityname` (`Cityname`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=211 ;
--
-- Dumping data for table `city`
--
INSERT INTO `city` (`Citycode`, `statecode`, `Cityname`) VALUES
(201, 101, 'Ludhayana'),
(202, 101, 'Jalander'),
(203, 102, 'Kullu'),
(204, 102, 'Mandi'),
(205, 102, 'Shimla'),
(206, 103, 'Pkl'),
(207, 103, 'Ambala'),
(208, 101, 'Amritsar'),
(209, 104, 'Itawa'),
(210, 105, 'mumbai');
-- --------------------------------------------------------
--
-- Table structure for table `market`
--
CREATE TABLE IF NOT EXISTS `market` (
`mcode` int(10) NOT NULL AUTO_INCREMENT,
`citicode` int(10) NOT NULL,
`mname` varchar(20) NOT NULL,
PRIMARY KEY (`mcode`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ;
--
-- Dumping data for table `market`
--
INSERT INTO `market` (`mcode`, `citicode`, `mname`) VALUES
(1, 201, 'Shiv Chock'),
(2, 201, 'Samrala Chock'),
(3, 202, 'Rama mandi'),
(4, 202, 'JL busstand'),
(5, 203, 'kullu busstand'),
(6, 204, 'indra market'),
(7, 205, 'Lakar bajar'),
(8, 205, 'shimla busstand'),
(9, 206, 'manimazra'),
(10, 207, 'amabala city'),
(11, 208, 'bagha border');
-- --------------------------------------------------------
--
-- Table structure for table `product`
--
CREATE TABLE IF NOT EXISTS `product` (
`Sno` int(11) NOT NULL AUTO_INCREMENT,
`Pname` varchar(50) NOT NULL,
`Price` int(50) NOT NULL,
`Qty` int(50) NOT NULL,
PRIMARY KEY (`Sno`),
UNIQUE KEY `Pname` (`Pname`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=113 ;
--
-- Dumping data for table `product`
--
INSERT INTO `product` (`Sno`, `Pname`, `Price`, `Qty`) VALUES
(101, 'Hard Disk', 100, 3),
(102, 'CD Rom', 39, 4),
(103, 'hdd', 555, 2),
(104, 'cd', 24, 11),
(105, 'flopy', 24, 11),
(106, 'flopys', 24, 11),
(107, 'motherboard', 24, 11),
(108, 'motherboard1', 24, 11),
(109, 'motherboard1d', 24, 11),
(110, 'Processor', 5555, 11),
(111, '', 0, 0),
(112, 'vcv', 0, 0);
-- --------------------------------------------------------
--
-- Table structure for table `state`
--
CREATE TABLE IF NOT EXISTS `state` (
`Sno` int(10) NOT NULL AUTO_INCREMENT,
`Sname` varchar(10) NOT NULL,
PRIMARY KEY (`Sno`),
UNIQUE KEY `Sname` (`Sname`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=105 ;
--
-- Dumping data for table `state`
--
INSERT INTO `state` (`Sno`, `Sname`) VALUES
(101, 'Punjab'),
(102, 'Himachal'),
(103, 'Haryana'),
(104, 'UP');
-- --------------------------------------------------------
--
-- Table structure for table `tbstudent`
--
CREATE TABLE IF NOT EXISTS `tbstudent` (
`Sno` int(10) NOT NULL AUTO_INCREMENT,
`Sname` varchar(50) NOT NULL,
`Sclass` varchar(50) NOT NULL,
`Saddress` varchar(100) NOT NULL,
PRIMARY KEY (`Sno`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=135 ;
--
-- Dumping data for table `tbstudent`
--
INSERT INTO `tbstudent` (`Sno`, `Sname`, `Sclass`, `Saddress`) VALUES
(114, 'Nitesh', '8th', ' #2234'),
(116, 'sanjay', '7th', '#2234 MOh'),
(123, 'reakhes', '12', ' #2234 MOh'),
(120, 'rakesh', '12th', ' maloya'),
(122, 'fgsfgdf', 'gfgsdfg', ' gsdfgsdfg'),
(124, 'anil', '12', ' mohali'),
(125, 'niks', '23', ' #4567'),
(126, 'kiran', '12', ' chd'),
(127, 'joy', '11', ' Usa'),
(128, 'Matt', '12', ' taxes'),
(129, 'nitika', '6th', ' mandi'),
(130, 'arvind', '14th', ' dera bassi'),
(131, 'aman', '12', ' Dhanas'),
(132, 'Pamel', '11th', ' philipins'),
(133, 'Rashad ', '3rd', ' bangladesh'),
(134, 'vinci ', '2nd', ' philipins');
After Working with these file you will get a completed tutorial for Ajax and php Drop Down menu. This project have still some bugs , i am still working on it and will be updating it.
