Basically nothing happens, I know clicking the button works and connecting to the db works but I'm unsure how to diagnose what is wrong with the javascript. It could be a syntax error but I've scanned for variable errors, wrong spelling.
driver.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<form method="POST">
<input type="text" id="search" size="2">
<input type="button" name="submit" id="submit" value="Search Drivers">
</form>
<table id="tbl_driver" style="display:none">
<tr><th>Last Name</th><td id="Last_Name"></td></tr>
<tr><th>First Name</th><td id="First_Name"></td></tr>
</table>
<script>
$(document).ready(function() {
$("#submit").click(function() {
$.ajax({
url:"fetch.driver.info.php",
type:"POST",
data:{driver:$("#search").val()},
dataType:"JSON",
success:function(data) {
$("#tbl_driver").show();
$("#Last_Name").text(data.Last_Name);
$("#First_Name").text(data.First_Name);
alert( "Handler for .click() called." );
}
})
});
});
</script>
</body>
</html>
fetch.driver.info.php
<?php
require 'db.inc.php';
$id = $_POST["driver"];
$sql = "select * FROM Drivers WHERE Driver_ID = $id";
$query = mysqli_query($con,$sql);
$data = array();
while($row=mysqli_fetch_array($query))
{
$data['Last_Name']=$row['Driver_Last_Name'];
$data['First_Name']=$row['Driver_First_Name'];
}
echo json_encode($data);
?>
db.inc.php
<?php
$con = new mysqli("localhost","root","","United_Limousine");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
exit();
}
?>