PERFECT DROPDWON GUIDANCE STEP BY STEP:
Dynamic Drop Down code with Ajax :
Step 1:
(1)create table categories:
Create table categories
( id int primary key auto_increment,
catname varchar(200)
);
(2)create table food:
Create table food
(id int primary key auto_increment,
food_name varchar(200),
catname varchar(200)
);
Step 2:
(1)write code for Dropdown.php file:
<html>
<head>
<script>
function ajax_post()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "food.php";
var fn = document.getElementById("catname").value;
var vars ="catname="+fn;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
function ajax_submit()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "submit.php";
var fn = document.getElementById("catname").value;
var fd = document.getElementById("food_name").value;
var vars ="catname="+fn+"&food_name="+fd;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status1").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status1").innerHTML = "processing...";
}
</script>
</head>
<body>
<table width="40%"border=1>
<tr><td width="50%"><center><select id=catname onchange="ajax_post();">
<option>SELECT</option>
<?php
$con=mysql_connect("Localhost","root","");
mysql_select_db("suchi",$con);
$sql="select * from categories";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['catname'].'">';
echo $row['catname'];
echo '</option>';
}
?>
</select></center></td>
<td width="50%"><div id=status>
<select name=foodname id=food_name>
<option>SELECT</option>
<?php
$con=mysql_connect("Localhost","root","");
mysql_select_db("suchi",$con);
$sql="select * from food";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['food_name'].'">';
echo $row['food_name'];
echo '</option>';
}
?>
</select></div></td>
</tr>
<tr><td height="30px" colspan=2><div id="status1"></div></td></tr>
<tr><td colspan=2>
<center><input type=submit name=submit value=submit onclick="ajax_submit();"></center></td></tr>
</table>
</body>
</html>
(2)write code for food.php file:
<html>
<head>
</head>
<body>
<select name=foodname id=food_name>
<?php
$food=$_POST['catname'];
$con=mysql_connect("Localhost","root","");
mysql_select_db("suchi",$con);
$sql="select * from food where catname='$food'";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['food_name'].'">';
echo $row['food_name'];
echo '</option>';
}
?>
</select>
</body>
</html>
(3)write code for submit.php file:
<?php
echo "testing for onclick ".'<Br>';
echo $catname=$_POST['catname'];
echo $foodname=$_POST['food_name'];
?>
==================================================================================================================================================================
Another dynamic dropdown practice on state wise city selection..
Create table city :
create table city
(id int,
city varchar(200),
state varchar(200)
);
Create table mystate:
create table mystate
(id int,
state varchar(200)
);
create table cityrecord:
create table cityrecord
(id int,
state varchar(200),
city varchar(200),
name varchar(200),
contact varchar(200)
);
and follow step by step :
(1)First write code for “statedropdown.php” file :
<html>
<head>
<script>
function ajax_post()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "city.php";
var fn = document.getElementById("mystate").value;
var vars ="mystate="+fn;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
function ajax_submit()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "cityrecord.php";
var fn = document.getElementById("mystate").value;
var fd = document.getElementById("city").value;
var nm = document.getElementById("name").value;
var cn= document.getElementById("contact").value;
var vars ="mystate="+fn+"&city="+fd+"&name="+nm+"&contact="+cn;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status1").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status1").innerHTML = "processing...";
}
</script>
</head>
<body>
name <input type=text id=name>
contact<input type=text id=contact>
<table width="40%"border=1>
<tr><td width="50%"><center><select id=mystate onchange="ajax_post();">
<option>SELECT</option>
<?php
$con=mysql_connect("Localhost","root","");
mysql_select_db("rajiv",$con);
$sql="select * from mystate";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['state'].'">';
echo $row['state'];
echo '</option>';
}
?>
</select></center></td>
<td width="50%"><div id=status>
<select id=city>
<option>SELECT</option>
<?php
$con=mysql_connect("Localhost","root","");
mysql_select_db("rajiv",$con);
$sql="select * from city";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['city'].'">';
echo $row['city'];
echo '</option>';
}
?>
</select></div></td>
</tr>
<tr><td height="30px" colspan=2><div id="status1"></div></td></tr>
<tr><td colspan=2>
<center><input type=submit name=submit value=submit onclick="ajax_submit();"></center></td></tr>
</table>
</body>
</html>
(2)write code for city.php file:
<html>
<head>
</head>
<body>
<select name=city id=city>
<?php
$state=$_POST['mystate'];
$con=mysql_connect("Localhost","root","");
mysql_select_db("rajiv",$con);
$sql="select * from city where state='$state'";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['city'].'">';
echo $row['city'];
echo '</option>';
}
?>
</select>
</body>
</html>
(3)write code for cityrecord.php file:
<?php
$city=$_POST['city'];
$state=$_POST['mystate'];
$name=$_POST['name'];
$contact=$_POST['contact'];
$con=mysql_connect("localhost","root","");
mysql_select_db("rajiv",$con);
$sql="insert into cityrecord(state,city,name,contact) values('$state','$city','$name','$contact')";
$result=mysql_query($sql)or die(mysql_error());
if($result)
{
echo "inserted";
}
else
{
echo "not inserted";
}
?>
No comments:
Post a Comment