Monday, April 16, 2012

Creating Drop Down List/Menu with Ajax and PhP

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.
Posted by at

2 comments:

Please Comment Here and make this blog better.

Subscribe to: Post Comments (Atom)