Dependent dropdown using ajax
index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top: 70px;">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form action="insert.php" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Department</label>
<input type="text" name="department" class="form-control" placeholder="Department">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject">
</div>
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
<br><br>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select.c").change(function(){
var s = $(".c option:selected").val();
$.ajax({
type: "POST",
url: "process.php",
data: { c : s }
}).done(function(data){
$("#sub").html(data);
});
});
});
</script>
<select class="c form-control" name="state">
<option >Select Department</option>
<?php
$con = mysqli_connect("localhost","root","root","drop") or die(mysqli_error());
$query = mysqli_query($con,"select DISTINCT department from form1") or die(mysqli_error($con));
while($row=mysqli_fetch_assoc($query)){
extract($row);
echo "<option value='$department'>$department</option>";
}
?>
</select><br>
<select class="form-control" id="sub" name="crop">
<option>Select Subject</option>
</select>
</div>
<div class="col-md-3"></div>
</div>
<br><br>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
process.php
<?php
if(isset($_POST["c"])){
// Capture selected country
// $type= $_POST["c"];
$str = $_POST['c'];
$con = mysqli_connect("localhost","root","root","drop") or die("Some error occurred during connection " . mysqli_error($con));
?>
<?php
//@mysqli_query($con,"SET NAMES 'utf8'",$id);
$sql='select DISTINCT subject from form1 where department="'.$str.'"';
$select=mysqli_query($con,$sql);
while($sele=mysqli_fetch_array($select))
{
echo"<option value=\"{$sele['subject']}\">{$sele['subject']}</option>";
}
}
?>
insert.php
<?php
$con = mysqli_connect("localhost","root","root","drop") or die(mysqli_error());
if(isset($_POST['submit'])){
extract($_POST);
$query = mysqli_query($con,"insert into form1(department,subject) values('$department','$subject') ") or die(mysqli_error($con));
if($query){
echo "<script>
alert('Data inserted successfully');
window.location.href='index.php';
</script>";
}
else
{
echo "<script>
alert('Data not inserted ');
window.location.href='index.php';
</script>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top: 70px;">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form action="insert.php" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Department</label>
<input type="text" name="department" class="form-control" placeholder="Department">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject">
</div>
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
<br><br>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select.c").change(function(){
var s = $(".c option:selected").val();
$.ajax({
type: "POST",
url: "process.php",
data: { c : s }
}).done(function(data){
$("#sub").html(data);
});
});
});
</script>
<select class="c form-control" name="state">
<option >Select Department</option>
<?php
$con = mysqli_connect("localhost","root","root","drop") or die(mysqli_error());
$query = mysqli_query($con,"select DISTINCT department from form1") or die(mysqli_error($con));
while($row=mysqli_fetch_assoc($query)){
extract($row);
echo "<option value='$department'>$department</option>";
}
?>
</select><br>
<select class="form-control" id="sub" name="crop">
<option>Select Subject</option>
</select>
</div>
<div class="col-md-3"></div>
</div>
<br><br>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
process.php
<?php
if(isset($_POST["c"])){
// Capture selected country
// $type= $_POST["c"];
$str = $_POST['c'];
$con = mysqli_connect("localhost","root","root","drop") or die("Some error occurred during connection " . mysqli_error($con));
?>
<?php
//@mysqli_query($con,"SET NAMES 'utf8'",$id);
$sql='select DISTINCT subject from form1 where department="'.$str.'"';
$select=mysqli_query($con,$sql);
while($sele=mysqli_fetch_array($select))
{
echo"<option value=\"{$sele['subject']}\">{$sele['subject']}</option>";
}
}
?>
insert.php
<?php
$con = mysqli_connect("localhost","root","root","drop") or die(mysqli_error());
if(isset($_POST['submit'])){
extract($_POST);
$query = mysqli_query($con,"insert into form1(department,subject) values('$department','$subject') ") or die(mysqli_error($con));
if($query){
echo "<script>
alert('Data inserted successfully');
window.location.href='index.php';
</script>";
}
else
{
echo "<script>
alert('Data not inserted ');
window.location.href='index.php';
</script>";
}
}
?>
Comments
Post a Comment