I'm struggling to identify the error in this code. I have created a search bar and implemented AJAX to automatically fetch data.
Here is the HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="bootstrap4/jquery/jquery.js"></script>
<script>
function loadproducts()
{
var name = document.getElementById("search");
if(name)
{
$.ajax({
type: 'post',
contentType:false,
cache: false,
processData:false,
data: {
products:name,
},
url: 'loadproducts.php',
success: function (response){
$('#product_area').html(response);
}
});
}
else
{
$('#product_area').html("No Product found!");
}
}
</script>
</head>
<body>
<input type="text" name="search" id="search" onkeyup="loadproducts();">
<div id="product_area">
</div>
</body>
</html>This is my loadproducts.php file:
<?php
include('server/connection.php');
if(isset($_POST['products']))
{
$name = mysqli_real_escape_string($db,$_POST['products']);
$show = "SELECT product_name, sell_price FROM products WHERE product_name LIKE '$name%' ";
$query = mysqli_query($db,$show);
if(mysqli_num_rows($query)>0)
{
while($row = mysqli_fetch_array($query))
{
echo "<p>".$row['product_name']."</p>";
echo "<p>".$row['sell_price']."</p>";
}
}
}
I even tried adding an alert("called") function in the AJAX success block and the alert does pop up but there is still no output displayed. I also modified
var name = document.getElementById("search");var name = document.getElementById("#search");