AJAX allows you to perform live searches over a network back to a database as the page is being displayed using HTTP.
Online Example - https://www.webslesson.info/2016/03/ajax-live-data-search-using-jquery-php-mysql.html
<?php
include("menu.php");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
th {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: left;
}
tr:nth-child(even) {background-color: #f2f2f1;}
tr:hover {background-color: #f5f5f5;}
td{
padding:5px;
text-align:left;
width:100px;
}
</style>
</head>
<body>
<div class="container">
<br />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Search</span>
<input type="text" name="search_text" id="search_text" placeholder="Search Student" class="form-control" />
</div>
</div>
<br />
<div id="result"></div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
<?php
//fetch.php
include("connect.php");
$output = '';
if(isset($_POST["query"]))
{
$search = mysqli_real_escape_string($conn, $_POST["query"]);
$query = "
SELECT * FROM students
WHERE last LIKE '%".$search."%'
OR first LIKE '%".$search."%'";
}
else
{
$query = "SELECT * FROM students ORDER BY last";
}
$result = mysqli_query($conn, $query);
if(mysqli_num_rows($result) > 0)
{
$output .= '
<div class="table-responsive">
<table class="table table bordered">
<tr>
<th>First</th>
<th>Last</th>
<th>HC</th>
<th>View</th>
</tr>
';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["first"].'</td>
<td>'.$row["last"].'</td>
<td>'.$row["HC"].'</td>
<td><a href="student_view.php?id='.$row["student_id"].'">View</td>
</tr>
';
}
echo $output;
}
else
{
echo 'Data Not Found';
}
?>
Form.php
Within your form you need to include jQuery at the header - see example below
Create a div id where you want the response code from the server to be placed - seat id
Create a jquery functions
load - when the drop down box value is changed - get the value and call the fetch function
On success the updated html code will be placed in the div id created
<?php
include('connect.php');
?>
<html>
<head>
<!-- Need to have at top of page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<script>
//run functions once page loaded - start Jquery
$(document).ready(function(){
//send venue id to fetch.php on success insert new html into div area seats
function seatCheck(query)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
//ons success
$('#seats').html(data); //
}
});
}
//when drop down box option changed get id for venue and run seatCheck function
$('#venue').change(function(){
var search = $(this).val();
seatCheck(search);
});
});
</script>
<body>
<h2>Event Set Up Example</h2>
<form>
Name of Event:<input type="text" name="event_name"></br>
Select Venue:<select id="venue" name ="venue">
<option value="" selected>--Select a Venue--</option>
<option value =1>Concordia</option>
<option value = 2>Adelaide Oval</option>
</select>
<div id ="seats"></div>
</form>
</body>
</html>
fetch.php
This script runs when the drop down list is changed. It passes a value via post and we search the database and echo back a line of html code with the required values
<?php
include("connect.php");
//global variable for output.
$output = '';
if(isset($_POST["query"])){
$venue_id = intval($_POST["query"]); //get value
$query = "select * from venues where venue_id like '".$venue_id."'"; //sql query
$result = mysqli_query($conn, $query); //run query in db
//check resullt
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result)){
$max = $row['max']; //store result in variable
//code to be returned to the form with updated values
$output='Max Seats: <input id ="seats" name ="seats" type="number" min="0" max="'.$max.'"required> Max Seats: '.$max;
}
echo $output; // return content to form
}else{
echo 'Data Not Found';
}
}
?>