如何使用PHP和AJAX将数据绑定到HTML下拉列表（用于on change事件）
问题描述 投票：0回答：2
我想根据课程字段显示讲师姓名。一个课程领域可以有两个或更多的讲师。现在，我正在一个名为ajax-lecturer.php的页面中从数据库中选择讲师的名字和用户名。
以下是ajax-lecturer.php的代码：
<?php
require("global-include.php");
if($_POST['field_id'])
{
$smt = $db->prepare("SELECT lecturer.name, lecturer.username FROM lecturer_field
LEFT JOIN course_field ON course_field.field_id = lecturer_field.field
LEFT JOIN users AS lecturer ON lecturer_field.lecturer_id = lecturer.username
WHERE course_field.field_id = :field_id");
$smt->bindParam(':field_id', $_POST['field_id']);
$smt->execute();
$data = $smt->fetchAll();
echo json_encode($data[0]);
}
else
{
echo 'Nothing is found';
}
?>
以下是lecturer_field表。一个字段可以有多个讲师，这就是为什么我把它放在讲台表字幕下：
以下是course_field表。此表中的field_id用作讲座字段表（字段列）的外键：
注意字段号。讲座表中的1个讲师有两个讲师绑定它。这意味着当从下拉列表中选择特定课程字段时，下拉列表中讲师的姓名和用户名（用于选项值）应该更改.Eg：
当选择计算机安全性课程字段作为上图时，下面的两个讲师名称应出现在下拉列表中。
下面users表中的用户名是lecturer_field表的一个外键（lecturer_id列）。学生角色的程序列链接到程序表。
我现在面临的问题是，当我检查下拉列表时，讲师的名字没有出来，并且有一个未定义的变量。
appointment-form.php的代码如下所示，此页面中的AJAX部分应该是从ajax-lecturer.php调用名称和用户名：
<?php
require ("global-include.php");
//Condition when the submit button is clicked
if(isset($_POST["btnSubmit"])){
try
{
//$appointment_date = date('Y-m-d',strtotime($_POST['appointment_date']));
//$appointment_date = date("Y-m-d H:i:s");
// Inserting the data into database
$insert_query = "INSERT INTO appointment (appointment_type, appointment_date, appointment_time, student_id, lecturer_id, field, venue, remarks, appointment_status)
VALUES ('".$_POST["appointment_type"]."',
'".$_POST["appointment_date"]."',
'".$_POST["appointment_time"]."',
'".$_POST["student_id"]."',
'".$_POST["lecturer_id"]."',
'".$_POST["field_id"]."',
'".$_POST["venue"]."',
'".$_POST["remarks"]."',
'".$_POST["appointment_status"]."'
)";
if (($db->query($insert_query)))
{
echo "<script type= 'text/javascript'>alert('An appointment is successfully made!');";
echo 'window.location= "student-view-appointment.php"';
echo "</script>";
}
else
{
echo "<script type= 'text/javascript'>alert('Error: An appoinment is not successfully made!');";
echo 'window.location= "student-view-appointment.php"';
echo "</script>";
}
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>STULEC | Appointment Form</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
<!-- daterange picker -->
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
<!-- bootstrap datepicker -->
<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="plugins/iCheck/all.css">
<!-- Bootstrap Color Picker -->
<link rel="stylesheet" href="bower_components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css">
<!-- Bootstrap time Picker -->
<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.css">
<!-- Select2 -->
<link rel="stylesheet" href="bower_components/select2/dist/css/select2.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skin -->
<link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!--Include header-->
<?php include 'include/header.php' ?>
<!--Include sidebar-->
<?php include 'include/sidebar.php' ?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1 align='center'>
<u>Appointment Form</u>
</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="box box-default">
<div class="box-body">
<div class="row">
<div class="col-md-12">
<!-- form start -->
<form class="form-horizontal" action="" method="POST">
<!--Name-->
<div class='form-group'>
<label for='Name' class='col-sm-2 control-label'>Name</label>
<div class='col-sm-10'>
<input type='text' class='form-control' name="student_name" id='student_name' value='<?php echo $name ?>' disabled>
<input type='hidden' class='form-control' name="student_id" id='student_id' value='<?=$_SESSION['username'] ?>' />
</div>
</div>
<!--Programme-->
<div class='form-group'>
<label for='Programme' class='col-sm-2 control-label'>Programme</label>
<div class='col-sm-10'>
<input type='text' class='form-control' id='programme' value='<?php echo $programme ?>' disabled>
</div>
</div>
<!--Consultation Type-->
<div class='form-group'>
<label for='ConsultationType' class='col-sm-2 control-label'>Consultation Type</label>
<div class='col-sm-10'>
<select class='form-control' name='appointment_type'>
<option selected='selected' name='assignment_discussion' value='Assignment Discussion'>Assignment Discussion</option>
<option name='advisory_session' value='Advisory Session'>Advisory Session</option>
<option name='fyp_discuss' value='Final Year Project Discussion'>Final Year Project Discussion</option>
</select>
</div>
</div>
<!--Field name-->
<div class='form-group'>
<label for='Course' class='col-sm-2 control-label'>Course Field</label>
<div class='col-sm-10'>
<select class='form-control' name='field_id' id='field_id'>
<?php
//Display field name
$select_field_query = "SELECT field_id, field_name FROM course_field
LEFT JOIN field_programme ON field_programme.field = course_field.field_id
LEFT JOIN users ON users.programme = field_programme.programme
LEFT JOIN programme ON programme.programme_id = field_programme.programme
WHERE field_programme.programme = :programme AND users.username = :student";
$field_statement = $db->prepare($select_field_query);
$field_statement->bindParam(':programme', $_SESSION['programme']);
$field_statement->bindParam(':student', $_SESSION['username']);
$field_statement->execute();
while ($row = $field_statement->fetch(PDO::FETCH_ASSOC))
{
echo
"<option value='" . $row['field_id'] . "'>" . $row['field_name'] . "</option>";
}
?>
</select>
</div>
</div>
<!--Lecturer name-->
<div class='form-group'>
<label for='Lecturer' class='col-sm-2 control-label'>Lecturer</label>
<div class='col-sm-10'>
<select class='form-control' name='lecturer_id' id='lecturer_id'>
<?php
//Displaying lecturer based on course field
$select_lecturer_query = "SELECT name, lecturer_id from lecturer_field
LEFT JOIN users ON users.username = lecturer_field.lecturer_id
LEFT JOIN field_programme ON field_programme.field = lecturer_field.field
WHERE users.role = 'Lecturer' AND users.department = :department
AND field_programme.programme= :programme";
$lect_smt = $db->prepare($select_lecturer_query);
$lect_smt->bindParam(':department', $_SESSION['department']);
$lect_smt->bindParam(':programme', $_SESSION['programme']);
$lect_smt->execute();
// $lecturer_data = $statement->fetchAll();
while ($row = $lect_smt->fetch(PDO::FETCH_ASSOC))
{
//echo
//"<option value='" . $data[0]['username'] ."'>" . $data[0]['name'] . "</option>";
echo "<option value='" . $row['lecturer_id'] ."'>" . $row['name'] . "</option>";
}
?>
</select>
</div>
</div>
<!-- Date -->
<div class='form-group'>
<label for='Date' class='col-sm-2 control-label'>Date</label>
<div class='col-sm-4'>
<div class='input-group date'>
<input type='text' class='form-control pull-right' name='appointment_date' id='datepicker' required>
<div class='input-group-addon'>
<i class='fa fa-calendar'></i>
</div>
</div><!-- /.input group -->
</div><!-- /.form group -->
</div>
<!-- Time -->
<div class='form-group'>
<label for='Time' class='col-sm-2 control-label'>Time</label>
<div class='col-sm-4'>
<div class='input-group time'>
<input type='text' class='form-control timepicker' name='appointment_time' id='timepicker' required>
<div class='input-group-addon'>
<i class='fa fa-clock-o'></i>
</div>
</div><!-- /.input group -->
</div>
</div><!-- /.form group -->
<!--Venue-->
<div class='form-group'>
<label for='Venue' class='col-sm-2 control-label'>Venue</label>
<div class='col-sm-10'>
<select class='form-control' name='venue'>
<option selected='selected' name='in_front_dpmt' value='In front of department'>In front of department</option>
<option name='library' value='Library'>Library</option>
<option name='consultation_room' value='Consultation Room'>Consultation Room</option>
</select>
</div>
</div>
<!--Remarks-->
<div class='form-group'>
<label for='Remarks' class='col-sm-2 control-label'>Remarks</label>
<div class='col-sm-10'>
<input type='text' class='form-control' name='remarks' id='remarks' placeholder='Eg: Related to the Local Area Network question' required>
</div>
</div>
<!--Hidden Appointment Status which is set as Active when form is submitted-->
<input type="hidden" value="Active" name="appointment_status">
<!--Submit button-->
<div class="box-footer">
<button type="submit" class="btn btn-success pull-right" name="btnSubmit" id="btnSubmit">Submit</button>
</div>
</form>
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- ./wrapper -->
<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Select2 -->
<script src="bower_components/select2/dist/js/select2.full.min.js"></script>
<!-- InputMask -->
<script src="plugins/input-mask/jquery.inputmask.js"></script>
<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- bootstrap datepicker -->
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- bootstrap color picker -->
<script src="bower_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<!-- bootstrap time picker -->
<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- SlimScroll -->
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- Page script -->
<!-- Change lecturer when different course name is selected -->
<script>
$(function ()
{
//Initialize Select2 Elements
$('.select2').select2()
$('select[name="field_id"]').change
(
function()
{
// alert($(this).val());
var id = $(this).val();
$.ajax
(
{
method: "POST",
url: "ajax-lecturer.php",
data: { field_id: id }
}
)
.done
(function( lect )
{
//alert(lect);
var lectObj = JSON.parse(lect);
//alert(lectObj);
$('input[name="lecturer_name"]').val(lectObj.name);
$('input[name="lecturer_id"]').val(lectObj.username);
}
);
}
);
//Datemask dd/mm/yyyy
$('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
//Datemask2 mm/dd/yyyy
$('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
//Money Euro
$('[data-mask]').inputmask()
//Date range picker
$('#reservation').daterangepicker()
//Date range picker with time picker
$('#reservationtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A' })
//Date range as a button
$('#daterange-btn').daterangepicker(
{
ranges : {
'Today' : [moment(), moment()],
'Yesterday' : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month' : [moment().startOf('month'), moment().endOf('month')],
'Last Month' : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate : moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
}
)
//Date picker
$( "#datepicker" ).datepicker({
dateFormat: "yyyy-mm-dd"
});
/*$('#datepicker').datepicker({
autoclose: true
})*/
//iCheck for checkbox and radio inputs
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass : 'iradio_minimal-blue'
})
//Red color scheme for iCheck
$('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass : 'iradio_minimal-red'
})
//Flat red color scheme for iCheck
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass : 'iradio_flat-green'
})
//Colorpicker
$('.my-colorpicker1').colorpicker()
//color picker with addon
$('.my-colorpicker2').colorpicker()
//Timepicker
$('.timepicker').timepicker({
showInputs: false
})
})
</script>
</body>
</html>
非常感谢您的帮助。谢谢。
更新：还有2个表链接到course_field表。
下面是程序表。它还链接到users表。 programme_id是users表中program列的外键。
下面是field_programme表。它将该领域与该计划结合在一起。字段列来自course_field表中的field_id，而程序列来自程序表
学生有自己的课程（例如：UCNT2）。他们将根据该计划的领域进行预约。例如，除了计算机安全和网络技术之外，UCNT2学生不能预约其他课程领域。
在进行预约时，它将进入预约表。以下是约会表中记录的示例： -
2个回答
0
投票
投票
$("#field_id").change(function () {
$.ajax({
type: 'POST',
url: 'ajax-lecturer.php',
data: { 'field_id' : $('#field_id option:selected').val() },
success: function(data) {
$('#lecturer_id').empty();
var lect = JSON.parse(data);
$.each(lect, function( index, lectObj ) {
$('#lecturer_id').append("<option value='"+lectObj.username+"'>"+lectObj.name+"</option>");
});
},
error: function(data) {
alert(data);
}
});
});
尝试在javascript部分添加上述代码。
请注意，返回的JSON数据必须同时包含查询中的username和name属性。
0
投票
投票
更新你的while循环
$select_field_query = "Select `lecturer_field`.`lecturer_id` ,
`user`.`name` FROM ((`user` JOIN `lecturer_field`
ON `user`.`username` = `lecturer_field`.`lecturer_id`)
JOIN `course_field` ON `lecturer_field`.`field` = `course_field`.`field_id`)
WHERE `lecturer_field`.`field`= :programme"
while ($row = $lect_smt->fetch(PDO::FETCH_ASSOC))
{
echo "<option value='" . $row['lecturer_id'] ."'>" . $row['name'] . "</option>";
}
//add script when you change field it will send ajax call and fetch lecturer as your requirements
<script>
$('#field_id').on('change',function(){
var programme = $(this).val();
var department = "<?php echo $_SESSION['department'] ;?>";
$.ajax({
type:"GET",
url:"ajax.php",
data:{programme:programme,department:department}, // multiple data sent using ajax
success: function (html) {
$('#lecturer_id').html(html);
}
});
});
</script>
ajax.php
<?php
$servername = "localhost";
$username = "root";
$password = "mysql";
try {
$db = new PDO("mysql:host=$servername;dbname=stulec",
$username, $password);
// set the PDO error mode to exception
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// echo "Connected successfully";
}
catch(PDOException $e)
{
echo "Connection failed: " . $e->getMessage();
}
if(isset($_GET['programme']) && isset($_GET['department']) )
{
$programme = $_GET['programme'];
$depart = $_GET['department'];
$output = '';
$select_lecturer_query = "SELECT name, lecturer_id from lecturer_field
LEFT JOIN users ON users.username = lecturer_field.lecturer_id
LEFT JOIN field_programme ON field_programme.field = lecturer_field.field
WHERE users.role = 'Lecturer' AND users.department = '$depart'
AND field_programme.programme= '$programme'";
$lect_smt = $db->prepare($select_lecturer_query);
$lect_smt->execute();
while ($row = $lect_smt->fetch(PDO::FETCH_ASSOC))
{
$output .= "<option value='" . $row['lecturer_id'] ."'>" . $row['name'] . "</option>";
}
echo $output;
}
?>
最新问题
- Filezilla FTP 服务器 - 客户端更改目录失败
- 如何检查dbt中的表是否为空？
- kubernetes 入口控制器如何配置 api 到 api 映射
- 如何为 Viber 建立深层链接，将重定向到手机上的特定号码
- VSCode 中的 Git bash、cwd 和目录问题
- 如何使用 StandardScaler 正确缩放训练集、验证集和测试集？
- Wordpress 使用查询参数重写 url
- 未处理的异常：FileSystemException：无法打开文件，路径='assets/res.zip'（操作系统错误：没有这样的文件或目录，errno = 2）
- 兼容目标框架中提到了net8.0-windows，但是在azure管道上恢复nuget包时，它失败了
- 如何只显示有值的字段，并隐藏没有值的字段？
- Symfony 从 String 类声明中获取 className 对象
- ChartJS：用不同的颜色填充高于最大值、介于最大值/最小值之间以及低于最小值限制的曲线数据集
- 如何使用脚本从 ImageJ/Fiji 中的图形中自动提取数据点？
- 使用 Android Pdf Viewer 渲染 PDF 时 Android 应用程序崩溃
- Flutter：错误（Xcode）：未定义符号：__swift_FORCE_LOAD_$_swiftCompatibility56
- 删除名称中包含空格的特定标签以外的所有标签
- 在`ggfittext::geom_fit_text`中，似乎不能使用`vjust`
- 如何计算php中两个日期的小时差？
- 在 React 中通过 axios 将参数发送到 C# 端点
- 如何在容器编译之前向 Symfony 2 添加自定义路由？
© www.soinside.com 2019 - 2024. All rights reserved.