Как я могу использовать зависимые выпадающие списки в модальном режиме загрузки 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
<?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);
?>
пожалуйста, помогите мне .. большое спасибо.
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
3
0
3 268
2
Ответы 2
Просто добавьте модальное окно начальной загрузки вместо panel и кнопку для открытия этого модального окна и добавьте свою форму в модальное тело.
Ваш код index.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>
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.info(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.info(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
**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");
}
}
?>
Другие вопросы по теме
Заглушка Swiper coverflow в контейнере Div
Нужно добавить ответ json
Запуск анимации javascript с последующим перенаправлением
Выбранная дата не должна отображаться при повторном нажатии поля даты в средстве выбора даты
Отправлять данные и изображение в PHP через AJAX
Javascript, заменяющий HTML-тег с использованием группы соответствия регулярных выражений
Вкладка или клавиша вправо / влево используются в соответствии со стандартом доступности
Как добавлять и удалять разные div с помощью флажков
Поиск в HTML для конкретных названий классов
Пример Bootstrap4 DataTables не работает
Похожие вопросы
Две формы, как различить каждую?
Вложенная категория laravel 5 и вложенная подкатегория
Невозможно получить значения из флажков
Как отсортировать числа по порядку?
Как добавить несколько файлов XML
Объект класса PDOStatement не может быть преобразован в строку - получить раскрывающийся список для динамического отображения данных
Многомерный массив PHP
Phpmyadmin / import.php не найден на этом сервере
Отправлять данные и изображение в PHP через AJAX
Вставка данных файла csv в базу данных mysql с использованием php