I want to implement the dropdown lists in bootstrap modal. I have already a demo code but I don't know how to implement it in the bootstrap modal.
我想在引导模式中实现下拉列表。我已经有了一个演示代码，但是我不知道如何在引导模式中实现它。
In The bootstrap modal form will be open with 2 dependent dropdowns and after submitting the values will be saved to database.
在引导模式表单中，将打开两个相关的下拉列表，提交后将保存到数据库。
Thanks a lot in advance.
非常感谢。
index.php
index . php
<!DOCTYPE html>
<html>
<head>
<title>PHP - dependent dropdown list</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Select State and get bellow Related City</div>
<div class="panel-body">
<div class="form-group">
<label for="title">Select State:</label>
<select name="state" class="form-control">
<option value="">--- Select State ---</option>
<?php
require('db_config.php');
$sql = "SELECT * FROM demo_state";
$result = $mysqli->query($sql);
while($row = $result->fetch_assoc()){
echo "<option value='".$row['id']."'>".$row['name']."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label for="title">Select City:</label>
<select name="city" class="form-control" style="width:350px">
</select>
</div>
</div>
</div>
</div>
<script>
$( "select[name='state']" ).change(function () {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: "ajaxpro.php",
dataType: 'Json',
data: {'id':stateID},
success: function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}else{
$('select[name="city"]').empty();
}
});
</script>
</body>
</html>
ajaxpro.php
ajaxpro.php
<?php
require('db_config.php');
$sql = "SELECT * FROM demo_cities
WHERE state_id LIKE '%".$_GET['id']."%'";
$result = $mysqli->query($sql);
$json = [];
while($row = $result->fetch_assoc()){
$json[$row['id']] = $row['name'];
}
echo json_encode($json);
?>
please help me.. thanks a lot.
请帮我. .非常感谢。
2 个解决方案
#1
1
Just add bootstrap modal instead of panel and a button for open that modal and add your form in a modal body.
Your code of index.php looks like below:
只需要添加引导模式而不是面板和一个按钮来打开那个模式，并将你的表单添加到一个模式体中。你的代码的索引。php看起来像下图:
<!DOCTYPE html>
<html>
<head>
<title>PHP - dependent dropdown list</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Select State and get bellow Related City</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="title">Select State:</label>
<select name="state" class="form-control">
<option value="">--- Select State ---</option>
<?php
require('db_config.php');
$sql = "SELECT * FROM demo_state";
$result = $mysqli->query($sql);
while($row = $result->fetch_assoc()){
echo "<option value='".$row['id']."'>".$row['name']."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label for="title">Select City:</label>
<select name="city" class="form-control" style="width:350px">
</select>
</div>
<button type="submit">submit</button>
</div>
</div>
</div>
</div>
<script>
$( "select[name='state']" ).change(function () {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: "ajaxpro.php",
dataType: 'Json',
data: {'id':stateID},
success: function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}else{
$('select[name="city"]').empty();
}
});
</script>
</div>
</body>
</html>
#2
1
index.php
index . php
<?php
include("db/db.php");
$select_country = "SELECT country_id,country_name from country";
$result_country = mysqli_query($con,$select_country);
?>
<!DOCTYPE html>
<html>
<head>
<title>ADDRESS FORM</title>
<script type="text/javascript" src="js/jquery.3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript">
$(document).on("click","#reg",function(){
$(".modal-title").html("Registration Form");
$("#myModal").modal({backdrop: "static", keyboard: false});
});
$(document).on("click","#adddata",function(e){
var state = parseInt($("#selectstate").val());
var country = parseInt($("#selectcountry").val());
console.log(state+country);
$.ajax({
type : 'POST',
url : 'insert_all.php?action=ins_std',
data : {'state': state,'country' : country},
dataType : "JSON",
success:function(feedback){
if(feedback=="yes"){
$(".alert2").html("<b style='color:green;'>Recored Successfully Added </b>");
$("#std-form")[0].reset();
$("#myModal").modal('hide');
$(".has-error").removeClass("has-error");
$(".alert2").show().delay(5000).fadeOut();
} else{
$("#alert").show();
$(".alert1").html("<b style='color:red;'> Cant Add Recored </b>");
$(".alert1").show().delay(5000).fadeOut();
}
}
});
});
$(document).on("change","#selectcountry",function(){
var c_id = parseInt($("#selectcountry").val());
console.log(c_id);
$.ajax({
type : 'POST',
url : 'get_asc.php',
data : {'country_id' : c_id},
success : function(feedback)
{
$("#selectstate").html(feedback);
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" id="btn_close">×</button>
<h4 class="modal-title"></h4><div class="alert1" id="alert"></div>
</div>
<div class="modal-body">
<form name="add" method="post" id="std-form">
<div class="form-group item-required" id="selectcountryerror">
<label for="country">Country</label>
<select id="selectcountry" name="selectcountry" class="form-control input-value">
<option value="">Select Country</option>
<?php foreach ($result_country as $country) { ?>
<option value="<?php echo $country["country_id"]?>"><?php echo $country["country_name"]?></option>
<?php } ?>
</select>
</div>
<div class="form-group item-required" id="selectstateerror">
<label for="state">State</label>
<select id="selectstate" name="selectstate" class="form-control input-value">
<option value="">Select State</option>
</select>
</div>
<div class="form-group" id="areaerror">
<button type="button" class="btn btn-default" id="adddata" >Add Data</button>
<button type="button" class="btn btn-default" id="savedata" data-dismiss="">Save Data</button><br>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btnclose" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<center>
<button type="button" class="btn btn-info btn-md" id="reg" >Click Here For Registration Form</button>
</center>
</div>
</body>
get_asc.php
get_asc.php
**insert/select page**
<?php
include("db/db.php");
if(isset($_POST['country_id']))
{
$select_state = "SELECT state_id,c_id,state_name from state where c_id = '".$_POST['country_id']."' ";
$result_state = mysqli_query($con,$select_state);
?>
<option value="">Select State</option>
<?php
foreach($result_state as $state) {
?>
<option value="<?php echo $state["state_id"]; ?>"><?php echo $state["state_name"]; ?></option>
<?php
}
}
elseif($_REQUEST['action']=="ins_std")
{
$country = mysqli_real_escape_string($con,$_POST['country']);
$state = mysqli_real_escape_string($con,$_POST['state']);
$insert_std = "INSERT into student (s_id,c_id) values ('".$state."','".$country."')";
$res_std=mysqli_query($con,$insert_std);
if($res_std){
echo json_encode("yes");
}else{
echo json_encode("fail");
}
}
?>
#1
1
Just add bootstrap modal instead of panel and a button for open that modal and add your form in a modal body.
Your code of index.php looks like below:
只需要添加引导模式而不是面板和一个按钮来打开那个模式，并将你的表单添加到一个模式体中。你的代码的索引。php看起来像下图:
<!DOCTYPE html>
<html>
<head>
<title>PHP - dependent dropdown list</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Select State and get bellow Related City</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="title">Select State:</label>
<select name="state" class="form-control">
<option value="">--- Select State ---</option>
<?php
require('db_config.php');
$sql = "SELECT * FROM demo_state";
$result = $mysqli->query($sql);
while($row = $result->fetch_assoc()){
echo "<option value='".$row['id']."'>".$row['name']."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label for="title">Select City:</label>
<select name="city" class="form-control" style="width:350px">
</select>
</div>
<button type="submit">submit</button>
</div>
</div>
</div>
</div>
<script>
$( "select[name='state']" ).change(function () {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: "ajaxpro.php",
dataType: 'Json',
data: {'id':stateID},
success: function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}else{
$('select[name="city"]').empty();
}
});
</script>
</div>
</body>
</html>
#2
1
index.php
index . php
<?php
include("db/db.php");
$select_country = "SELECT country_id,country_name from country";
$result_country = mysqli_query($con,$select_country);
?>
<!DOCTYPE html>
<html>
<head>
<title>ADDRESS FORM</title>
<script type="text/javascript" src="js/jquery.3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript">
$(document).on("click","#reg",function(){
$(".modal-title").html("Registration Form");
$("#myModal").modal({backdrop: "static", keyboard: false});
});
$(document).on("click","#adddata",function(e){
var state = parseInt($("#selectstate").val());
var country = parseInt($("#selectcountry").val());
console.log(state+country);
$.ajax({
type : 'POST',
url : 'insert_all.php?action=ins_std',
data : {'state': state,'country' : country},
dataType : "JSON",
success:function(feedback){
if(feedback=="yes"){
$(".alert2").html("<b style='color:green;'>Recored Successfully Added </b>");
$("#std-form")[0].reset();
$("#myModal").modal('hide');
$(".has-error").removeClass("has-error");
$(".alert2").show().delay(5000).fadeOut();
} else{
$("#alert").show();
$(".alert1").html("<b style='color:red;'> Cant Add Recored </b>");
$(".alert1").show().delay(5000).fadeOut();
}
}
});
});
$(document).on("change","#selectcountry",function(){
var c_id = parseInt($("#selectcountry").val());
console.log(c_id);
$.ajax({
type : 'POST',
url : 'get_asc.php',
data : {'country_id' : c_id},
success : function(feedback)
{
$("#selectstate").html(feedback);
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" id="btn_close">×</button>
<h4 class="modal-title"></h4><div class="alert1" id="alert"></div>
</div>
<div class="modal-body">
<form name="add" method="post" id="std-form">
<div class="form-group item-required" id="selectcountryerror">
<label for="country">Country</label>
<select id="selectcountry" name="selectcountry" class="form-control input-value">
<option value="">Select Country</option>
<?php foreach ($result_country as $country) { ?>
<option value="<?php echo $country["country_id"]?>"><?php echo $country["country_name"]?></option>
<?php } ?>
</select>
</div>
<div class="form-group item-required" id="selectstateerror">
<label for="state">State</label>
<select id="selectstate" name="selectstate" class="form-control input-value">
<option value="">Select State</option>
</select>
</div>
<div class="form-group" id="areaerror">
<button type="button" class="btn btn-default" id="adddata" >Add Data</button>
<button type="button" class="btn btn-default" id="savedata" data-dismiss="">Save Data</button><br>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btnclose" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<center>
<button type="button" class="btn btn-info btn-md" id="reg" >Click Here For Registration Form</button>
</center>
</div>
</body>
get_asc.php
get_asc.php
**insert/select page**
<?php
include("db/db.php");
if(isset($_POST['country_id']))
{
$select_state = "SELECT state_id,c_id,state_name from state where c_id = '".$_POST['country_id']."' ";
$result_state = mysqli_query($con,$select_state);
?>
<option value="">Select State</option>
<?php
foreach($result_state as $state) {
?>
<option value="<?php echo $state["state_id"]; ?>"><?php echo $state["state_name"]; ?></option>
<?php
}
}
elseif($_REQUEST['action']=="ins_std")
{
$country = mysqli_real_escape_string($con,$_POST['country']);
$state = mysqli_real_escape_string($con,$_POST['state']);
$insert_std = "INSERT into student (s_id,c_id) values ('".$state."','".$country."')";
$res_std=mysqli_query($con,$insert_std);
if($res_std){
echo json_encode("yes");
}else{
echo json_encode("fail");
}
}
?>