Self teaching myself PHP using problems at end of chapters of the book I'm using to learn how to apply the methods for each chapter. Created a html page that accepts user input of a car id, clicks a button and the information for that car is displayed in textboxes. I've searched a lot of documentation, SO and the web and could not find the method I'm looking for based on my current learning barometer. Would using php explode() method work or does the ajax/json do better job?
When I click search nothing is being populated in the text boxes so if someone can teach me what I'm doing wrong and where I need to fix my code that would be super great. Thanks!
<?php
$host = "localhost";
$dbname = "car_search_db";
$user = "pontiac";
$password = "Race_Day!";
try {
$db = new PDO("mysql:dbname=$dbname;host=$host",$user,$password);
}
catch (PDOException $e) {
$error_message = $e->getMessage();
include ('error.php');
exit();
}
$car_ID = isset($_GET['car_ID']) ? $_POST['car_ID'] : '';
if($car_ID == "")
die("Invalid input");
$query = 'SELECT carID, make, model, year FROM fastCars
WHERE carID = :car_ID';
$statement = $db->prepare($query);
$statement->bindValue(':car_ID', $car_ID);
$statement->execute();
$cars = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($cars);
echo $json;
?>
<!DOCTYPE html>
<head>
<title>Fast Car Page</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script type="text/javascript">
function queryCars() {
//get user input
var id = document.getElementById('car_ID').value;
//create a query string
var queryString = "?car_ID=" + car_ID;
//create XMLHTTP Request
var ajaxRequest;
try {
ajaxRequest = new XMLHttpRequest;
}catch(e) {
//IE Browsers
try {
ajaxRequest = new ActiveXobjectect("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXobjectect("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Browser not compatible");
return false;
}
}
}
//create ajax function that processes server response
ajaxRequest.onreadystatechange = function() {
if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
var object = JSON.parse(xmlhttp.responseText);
document.getElementById('car_id').value = object[0].car_ID;
document.getElementById('make').value = object[1].make;
document.getElementById('model').value = object[2].model;
document.getElementById('year').value = object[3].year;
}
};
//execute the query
xmlhttp.open("POST", "car_search.php" + queryString, true);
xmlhttp.send();
}
</script>
<header><h1>Fast Car Lookup - Search & Split</h1></header>
<br>
<h2>Search for a car info by ID</h2>
<br>
<form action="car_search.php" method="get">
<label>StudentID:</label>
<input type="text" id="id" name="car_ID">
<br>
<br>
<input type="button" onclick="queryCars();" value="Search" id="get_info">
<h2>information will be displayed in the textboxes below for the car ID chosen:</h2>
<br>
<table id="outuput">
<tr>
<td><label>Car ID:</label></td>
<td><input type="text" id="car_ID" value="" readonly></td>
</tr>
<tr>
<td><label>Make:</label></td>
<td><input type="text" id="make" value="" readonly></td>
</tr>
<tr>
<td><label>Model:</label></td>
<td><input type="text" id="model" value="" readonly></td>
</tr>
<tr>
<td><label>Year:</label></td>
<td><input type="text" id="" value="" readonly></td>
</tr>
<br>
</table>
</form>
<a href="index.htm">Back to first page</a>
</body>
</html>
