Friday, 13 November 2015

PHP Script for Dynamic Drop down List

01:11

(1)create table   account:


create table account
(
id  int(5) primary key auto_increment,
name  varchar(20),
contact  varchar(20),
address  varchar(200),
emailid  varchar(20),
account   varchar(20),
password   varchar(20),
image      varchar(200),
idproof     varchar(200),
addressproof varchar(200));

(2)insert some values  into table

(3) then use following code :


<html>
<head>
<title>
Deposit money
</title>
</head>

<body>
<form   >
<select name=account>
<?php

include("connect.php");

$sql="select * from account";

$result=mysql_query($sql);

while($row=mysql_fetch_array($result))
{

echo '<option value="'.$row['id'].'">';

echo $row['id'];

echo '</option>';

}

?>
</select>
<form>
</body>
</html>
=================================================================================
Dynamic Drop-down code   using   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   foold.html   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("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...";
}
</script>
</head>
<body>
<select id=catname  onchange="ajax_post();">
<option value=sweet> sweet</option>
<option value=salty>salty</option>
</select>
 <div id="status"></div>
<input type=submit   name=submit  value=submit   onclick="ajax_submit();">
</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("abhi",$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'];
?>

==================================================================================================================================================================
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)
);


just see following output:
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";
                              }
                             

                              ?>



==================================================================================================================================================================
how to display   dynamic   drop down menu with submenu example:

<ul class="nav navbar-nav">
                <li class="active"><a href="index.php">HOME</a></li>
                <li><a href="About-Us.php">ABOUT US</a></li>
                <li> 
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">COURSES<b class="caret"></b></a>
                    <ul class="dropdown-menu multi-level">
<?php
$con=mysql_connect("Localhost","root","");
mysql_select_db("vissicomp",$con);
$sql="select * from category";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{


echo '<li class="dropdown-submenu">';
//<a href="#c2" class="dropdown-toggle" data-toggle="dropdown">CAREER COURSES</a>';
                        ?>


<a href="<?php echo $row['link']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $row['category'];  ?>
<?php

echo '</a>';
//echo  '</li>';


?>
<?php
//$catname=$_GET['category']; 
$con1=mysql_connect("Localhost","root","");
mysql_select_db("vissicomp",$con1);
$catname=$row['category'];
   $sql1="select * from course where category='$catname'";
$result1=mysql_query($sql1);
echo '<ul class="dropdown-menu">';
while($row1=mysql_fetch_array($result1))
{
echo '<li>';
?>
<!--<a href="<?php //echo $row1['link']; ?>"> <?php //echo $row1['coursename']; ?> </a>-->
<!--<a href="selectcourse1.php?coursename=<?php //echo $row1['coursename'];  ?>"><?php //echo $row1['coursename']; ?></a>-->
<a href="<?php echo $row1['coursename'];  ?>.php"><?php echo $row1['coursename']; ?></a>
<?php
//echo '<h3>';
//echo $row1['coursename'];
//echo '</h3>';
//echo '</a>';
echo  '</li>';
}
echo '</ul>';
//echo '</ul>';
echo '</li>';
}
                        ?>    
                             
                         
                         
                  
                </ul>
                </li>
            

Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

0 comments:

Post a Comment

PHP Training Mumbai, PHP MySQL Training Mumbai, PHP Course Mumbai, PHP Institute Mumbai

 

© 2013 PHP TRAINING IN MUMBAI BY OM SIR . All rights resevered. Designed by OM SIR

Back To Top