I'm trying to show the information of specific book with ajax, but when I pick an option, It won't show the information, What did I do wrong?
First code -> show_books_ajax.php
Second code -> ajax.js
Third code -> get_books.php
<pre><?php include('header.html') ?>
<br>
<div class="container">
<div class="card">
<div class="card-header">Search Specific Book Data</div>
<div class="card-body">
<select name="books" id="books" class="form-control" onchange="showBooks(this.value)">
<option value="">--Select a Book--</option>
<?php
require_once('db_login.php');
$query = " SELECT * FROM books ORDER BY isbn ";
$result = $db->query($query);
if (!$result) {
die("Could not query the database: <br />" . $db->error);
}
while ($row = $result->fetch_object()) {
echo '<option value="' . $row->isbn . '">' . $row->title . '</option>';
}
$result->free();
$db->close();
?>
</select>
<br>
<div id="detail_books"></div>
</div>
</div>
</div>
<?php include('footer.html') ?>
<script src="ajax.js"></script>
What I have tried:
function callAjax(url, inner) {
var xmlhttp = getXMLHTTPRequest();
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange = function () {
document.getElementById(inner).innerHTML = '<img src="images/ajax_loader.png"/>';
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(inner).innerHTML = xmlhttp.responseText;
}
return false;
};
xmlhttp.send(null);
}
function showBooks(isbn) {
var inner = 'detail_books';
var url = 'get_books.php?id=' + isbn;
if (isbn == '') {
document.getElementById(inner).innerHTML = '';
} else {
callAjax(url, inner);
}
}
<?php
require_once('db_login.php');
$isbn = $_GET['isbn'];
$query = " SELECT * FROM books where isbn=".$isbn;
$result = $db->query( $query );
if (!$result){
die ("Could not query the database: <br />". $db->error);
}
while ($row = $result->fetch_object()){
echo 'Author: '.$row->author.'<br />';
echo 'Title: '.$row->title.'<br />';
echo 'Price: '.$row->price.'<br />';
}
$result->free();
$db->close();
?>