biplab3/dropdown.php

## dropdown.php
<?php
//session_start();
include('connect.php');
if(isset($_POST['state_name']))
{
	$state_name = $_POST['state_name'];
	$stmt = $con->prepare("select * from city where state_id='$state_name'");
	$stmt->execute();
	$city_details = $stmt->fetchAll(PDO::FETCH_ASSOC);
	$option1 = '<select class="form-control" name="city">
				<option value="0">--Please Select--</option>';
	$option2 = '';
	foreach($city_details as $city){
		$option2 = $option2.'<option value="'.$city['id'].'">'.$city['city_name'].'</option>';
	}
	$option3 = '</select>';
	$option4 = $option1.$option2.$option3;
	$option5['cities'] = $option4;
	echo json_encode($option5);
	exit();
}
?>
<html>
<head>
<title>ajax example</title>
<link rel="stylesheet" href="bootstrap.css" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.css" crossorigin="anonymous">
<style>
.container{
	width:50%;
	height:30%;
	padding:20px;
}
</style>
</head>
<body>
	<div class="container">
		<h3 align="center"><u>FETCH VALUE FROM DATABASE INTO DROPDOWN USING AJAX</u></h3>
		<br/><br/><br/>
<form class="form-horizontal" action="#">
	<div id="newuser"></div>
		  <div class="form-group">
		    <label class="control-label col-sm-2" for="state">State*:</label>
<?php
$stmt1 = $con->prepare("select * from state order by id ASC");
$stmt1->execute();
$state_details = $stmt1->fetchAll(PDO::FETCH_ASSOC);
?>
			    <div class="col-sm-10">
			      <select class="form-control" name="state" id="st" required="">
			      	<option value="0">--Please Select--</option>
			      	<?php
			      	foreach($state_details as $state)
			      	{
						echo '<option value="'.$state['id'].'">'.$state['state_name'].'</option>';
					}
			      	?>
			      </select>
			    </div>
		</div>
		<br/>
		<div class="form-group">
		    <label class="control-label col-sm-2" for="city">City*:</label>
			    <div class="col-sm-10" id="city_div">
			     <select class="form-control" name="city">
			      	    <option value="0">--Please Select--</option>

			      </select>
			    </div>
		</div>

</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
//insert Data
$('#st').change(function(){
	var state = $('#st').val();
		//alert(state);
//send request to the ajax
	$.ajax({
			url: 'dropdownajax.php',
			type: 'post',
			data: {
				'state_name': state
			},
			dataType: 'json',

			})
			.done(function(data){
				$('#city_div').html(data.cities);
			})
			.fail(function(data,xhr,textStatus,errorThrown){
				alert(errorThrown);
	});
});
</script>
</body>
</html>
	<?php
	//session_start();
	include('connect.php');
	if(isset($_POST['state_name']))
	{
	$state_name = $_POST['state_name'];
	$stmt = $con->prepare("select * from city where state_id='$state_name'");
	$stmt->execute();
	$city_details = $stmt->fetchAll(PDO::FETCH_ASSOC);
	$option1 = '<select class="form-control" name="city">
	<option value="0">--Please Select--</option>';
	$option2 = '';
	foreach($city_details as $city){
	$option2 = $option2.'<option value="'.$city['id'].'">'.$city['city_name'].'</option>';
	}
	$option3 = '</select>';
	$option4 = $option1.$option2.$option3;
	$option5['cities'] = $option4;
	echo json_encode($option5);
	exit();
	}
	?>
	<html>
	<head>
	<title>ajax example</title>
	<link rel="stylesheet" href="bootstrap.css" crossorigin="anonymous">
	<!-- Optional theme -->
	<link rel="stylesheet" href="bootstrap-theme.css" crossorigin="anonymous">
	<style>
	.container{
	width:50%;
	height:30%;
	padding:20px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h3 align="center"><u>FETCH VALUE FROM DATABASE INTO DROPDOWN USING AJAX</u></h3>
	<br/><br/><br/>
	<form class="form-horizontal" action="#">
	<div id="newuser"></div>
	<div class="form-group">
	<label class="control-label col-sm-2" for="state">State*:</label>
	<?php
	$stmt1 = $con->prepare("select * from state order by id ASC");
	$stmt1->execute();
	$state_details = $stmt1->fetchAll(PDO::FETCH_ASSOC);
	?>
	<div class="col-sm-10">
	<select class="form-control" name="state" id="st" required="">
	<option value="0">--Please Select--</option>
	<?php
	foreach($state_details as $state)
	{
	echo '<option value="'.$state['id'].'">'.$state['state_name'].'</option>';
	}
	?>
	</select>
	</div>
	</div>
	<br/>
	<div class="form-group">
	<label class="control-label col-sm-2" for="city">City*:</label>
	<div class="col-sm-10" id="city_div">
	<select class="form-control" name="city">
	<option value="0">--Please Select--</option>

	</select>
	</div>
	</div>

	</form>
	</div>
	<script src="jquery-3.2.1.min.js"></script>
	<script src="bootstrap.min.js"></script>
	<script>
	//insert Data
	$('#st').change(function(){
	var state = $('#st').val();
	//alert(state);
	//send request to the ajax
	$.ajax({
	url: 'dropdownajax.php',
	type: 'post',
	data: {
	'state_name': state
	},
	dataType: 'json',

	})
	.done(function(data){
	$('#city_div').html(data.cities);
	})
	.fail(function(data,xhr,textStatus,errorThrown){
	alert(errorThrown);
	});
	});
	</script>
	</body>
	</html>