This HTML form is working as required expect for one thing. When I click on the selected searched result for the first live search box (Session_Code), the second live search box (Subject_Code) gets assigned the selected searched result instead of the Session_Code live search box. The second live search box is working fine.
The code has been appropriated from https://www.cloudways.com/blog/live-search-php-mysql-ajax/
I feel the problem is because the Session_Code PHP file is confused about which live search box is which in the HTML form as I am using a separate PHP file for each live search box and a separate JavaScript file for each live search box, but I am not sure how to fix this problem.
Thank you in advance for any help you are able to give
The code for the HTML form
<!DOCTYPE html>
<head>
<title>.....</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="Session_Code_Script.js"></script>
<script type="text/javascript" src="Subject_Code_Script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<p>Today Date/Time <span id="datetime"></span></p>
<script>
var dt = new Date();
document.getElementById("datetime").innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+ (dt.getFullYear()) +" "+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2));
</script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3mobile.css">
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<form action="CreateMeeting.php" method="post" id="meeting">
<label for="MeetingTime">Meeting Time:</label>
<input name="MeetingTime" type="time" value= "19:00:00" required form="meeting"> <br /> <br />
<input type="radio" name="Day" value="Monday" required> Monday<br>
<input type="radio" name="Day" value="Tuesday"> Tuesday<br>
<input type="radio" name="Day" value="Wednesday"> Wednesday<br>
<input type="radio" name="Day" value="Thursday"> Thursday<br>
<input type="radio" name="Day" value="Friday"> Friday<br>
<br>
<label for="Session_Code">Session Code:</label>
<input name ="Session_Code" type="text" id="Session_Code" placeholder="Session_Code" form="meeting" />
<br>
<div id="display"></div>
<br>
<label for="Subject_Code">Subject Code:</label>
<input name ="Subject_Code" type="text" id="Subject_Code" placeholder="Subject_Code" form="meeting" />
<div id="display2"></div>
</form>
<br>
<br>
<input type="submit" name="Submit" form="meeting">
<br>
<br>
</body>
</html>
Session_Code_Script.js
function fill(Value) {
$('#Session_Code').val(Value);
$('#display').hide();
}
$(document).ready(function() {
$("#Session_Code").keyup(function() {
var session_code = $('#Session_Code').val();
if (session_code == "") {
$("#display").html("");
}
else {
$.ajax({
type: "POST",
url: "Session_Code_Ajax.php",
data: {
Session_Code: session_code
},
success: function(html) {
$("#display").html(html).show();
}
});
}
});
});
Session_Code_Ajax.php
<?php
include "db.php";
if (isset($_POST['Session_Code'])) {
$Session_Code = $_POST['Session_Code'];
$Query = "SELECT Session_Code FROM Session WHERE Session_Code LIKE '%$Session_Code%' LIMIT 5";
$ExecQuery = MySQLi_query($con, $Query);
echo '
<ul>
';
while ($Result = MySQLi_fetch_array($ExecQuery)) {
?>
<li onclick='fill("<?php echo $Result['Session_Code']; ?>")'>
<a>
<?php echo $Result['Session_Code']; ?>
</li></a>
<?php
}}
?>
</ul>
Subject_Code_Script.js
function fill(Value) {
$('#Subject_Code').val(Value);
$('#display2').hide();
}
$(document).ready(function() {
$("#Subject_Code").keyup(function() {
var subject_code = $('#Subject_Code').val();
if (subject_code == "") {
$("#display2").html("");
}
else {
$.ajax({
type: "POST",
url: "Subject_Code_Ajax.php",
data: {
Subject_Code: subject_code
},
success: function(html) {
$("#display2").html(html).show();
}
});
}
});
});
Subject_Code_Ajax.php
<?php
include "db.php";
if (isset($_POST['Subject_Code'])) {
$Subject_Code = $_POST['Subject_Code'];
$Query = "SELECT Subject_Code FROM Subject WHERE Subject_Code LIKE '%$Subject_Code%' LIMIT 5";
$ExecQuery = MySQLi_query($con, $Query);
echo '
<ul>
';
while ($Result = MySQLi_fetch_array($ExecQuery)) {
?>
<li onclick='fill("<?php echo $Result['Subject_Code']; ?>")'>
<a>
<?php echo $Result['Subject_Code']; ?>
</li></a>
<?php
}}
?>
</ul>
