I'm just having some trouble initializing a DataTable using Ajax and PHP. According to the inspector the error is:
Uncaught TypeError: Cannot read property 'length' of undefined jquery.dataTables.js:2649
(anonymous function) jquery.dataTables.js:2649
oSettings.jqXHR.$.ajax.success jquery.dataTables.js:8749
c jquery.js:3048
p.fireWith jquery.js:3160
k jquery.js:8235
r jquery.js:8778
I've followed the instructions as on datatable website but apparently I'm doing something wrong. It's not the php part, I've just checked it and it is returning a json file.
Here's what I've got.
Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chromo Insiders</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="DataTables/media/js/jquery.dataTables.js"></script>
<script type="application/javascript" language="javascript" src="insiders.js"></script>
<link rel="stylesheet" type="text/css" href="ci_style.css" />
<style type="text/css">
#import 'DataTables/media/css/demo_table_jui.css';
</style>
</head>
<body>
<header>
<h1>Chromo Insiders</h1>
</header>
<table id="datatables">
<thead>
<tr>
<th>email</th>
<th>Last Name</th>
<th>First Name</th>
<th>Date Registered</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
Here's the script:
$(document).ready(function(e) {
$('#datatables').dataTable( {
"bProcessing": true,
"sAjaxSource": 'process.php'
} );
});
Just in case you need to take a look to the php code:
<?php
try {
$conn = require_once 'dbConnect.php';
$sql = "SELECT email, lastName, firstName, state, dateRegistered FROM Users";
$result = $conn->prepare($sql) or die ($sql);
if(!$result->execute()) return false;
if($result->rowCount() > 0) {
$json = array();
while($row = $result->fetch()){
$json[] = array(
'email' => $row['email'],
'lastName' => $row['lastName'],
'firstName' => $row['firstName'],
'dateRegistered' => $row['dateRegistered'],
'state' => $row['state']
);
}
$json['success'] = true;
echo json_encode($json);
}
} catch(PDOException $e) {
echo 'Error: ' . $e->getMessage();
}
?>
You need to change your response as such:
if($result->rowCount() > 0) {
$json = array();
while($row = $result->fetch()){
/** MAKE ARRAY NON ASSOCIATIVE **/
$json[] = array(
$row['email'],
$row['lastName'],
$row['firstName'],
$row['dateRegistered'],
$row['state']
);
}
/*** MAKE RESPONSE HAVE 'aaData' ENTRY ****/
$response = array();
$response['success'] = true;
$response['aaData'] = $json;
echo json_encode($response);
Reference here: http://datatables.net/release-datatables/examples/data_sources/ajax.html. Specifically:
DataTables expects an object with an array called "aaData" with the
data source.
Also your table does not have a 'state' column, although your ajax response does...
Related
I have a database table with a large amount of data, and it takes a lot of time to load into the datatable. So I use the server side script for load data for the current page only.
But now I need to add a new condition in 'where' section and when I add the condition, the search property of datatable not working.
I also need to sort the table by language_id it doesn't work at all
my code is
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Datatable with mysql</title>
<link rel="stylesheet" id="font-awesome-style-css" href="http://phpflow.com/code/css/bootstrap3.min.css" type="text/css" media="all">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
<div class="">
<h1>Data Table</h1>
<div class="">
<table id="employee_grid" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Empid</th>
<th>Name</th>
<th>Salary</th>
<th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Empid</th>
<th>Name</th>
<th>Salary</th>
<th>Age</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$('#employee_grid').DataTable({
"bProcessing": true,
"serverSide": true,
"ajax":{
url :"response.php", // json datasource
type: "post", // type of method ,GET/POST/DELETE
error: function(){
$("#employee_grid_processing").css("display","none");
}
}
});
});
</script>
</body>
</html>
response.php
<?php
//include connection file
include_once("connection.php");
// initilize all variable
$params = $columns = $totalRecords = $data = array();
$params = $_REQUEST;
//define index of column
$columns = array(
0 =>'blog_id',
1 =>'blog_caption',
2 => 'publisher_name',
3 => 'published_date'
);
$where = $sqlTot = $sqlRec = "";
// check search value exist
if( !empty($params['search']['value']) ) {
$where .=" WHERE ";
$where .=" ( blog_caption LIKE '".$params['search']['value']."%' ";
$where .=" OR publisher_name LIKE '".$params['search']['value']."%' ";
$where .=" OR published_date LIKE '".$params['search']['value']."%' )";
}
// getting total number records without any search
$sql = "SELECT blog_id,blog_caption,publisher_name,published_date FROM `blog_table` ";
$sqlTot .= $sql;
$sqlRec .= $sql;
//concatenate search sql if value exist
if(isset($where) && $where != '') {
$sqlTot .= $where;
$sqlRec .= $where;
}
$sqlRec .= " ORDER BY ". $columns[$params['order'][0]['column']]." ".$params['order'][0]['dir']." LIMIT ".$params['start']." ,".$params['length']." ";
$queryTot = mysqli_query($conn, $sqlTot) or die("database error:". mysqli_error($conn));
$totalRecords = mysqli_num_rows($queryTot);
$queryRecords = mysqli_query($conn, $sqlRec) or die("error to fetch employees data");
//iterate on results row and create new index array of data
while( $row = mysqli_fetch_row($queryRecords) ) {
$data[] = $row;
}
$json_data = array(
"draw" => intval( $params['draw'] ),
"recordsTotal" => intval( $totalRecords ),
"recordsFiltered" => intval($totalRecords),
"data" => $data // total data array
);
echo json_encode($json_data); // send data as json format
?>
Thanks in advance.
Im trying to read data from my database to my view in my application in the web browser. Problem is that I can't get any data to show. The data is shown in the console, so it's connecting to the database but somehow it doesn't print the data in the view.
Data is showing in console but not in view
playerDetails.php
include 'database_connections.php';
$sql = "SELECT idPlayer, PlayerName, PlayerEmail, PlayerPassword,
PlayerTeam FROM Players";
$result = mysqli_query($conn, $sql);
$data = array();
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
} else {
echo "0 results";
}
mysqli_close($conn);
echo json_encode($data);
angular-script.js (Controller)
var crudApp = angular.module('crudApp',[]);
crudApp.controller('DbController', function ($scope, $http) {
$http.get("DatabaseFiles/playerDetails.php")
.then(function (response) {$scope.players = response.data;
console.log(response.data)
});
});
HTML
<!doctype html>
<html ng-app='crudApp'>
<head>
<title>Crud app</title>
<script src="js/jQuery/jquery.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
</head>
<body>
<div ng-controller="DbController">
<table >
<tr>
<th>Player ID</th>
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Team</th>
</tr>
<tr ng-repeat="players in Players | orderBy:'-created'">
<td>{{players.idPlayer}}</td>
<td>{{players.PlayerName}}</td>
<td>{{players.PlayerEmail}}</td>
<td>{{players.PlayerPassword}}</td>
<td>{{players.PlayerTeam}}</td>
</tr>
</table>
</div>
<script src="js/angular-script.js"></script>
</body>
SOLVED
Im not sure what caused the problem but I created a new database and a new project and did the following changes to my PlayerController.js (former "angular-script.js") and index.html
PlayerController.js
var app = angular.module('crudApp', []);
app.controller('mainController', function($scope, $http) {
$http.get('PlayerRead.php').then(function(response) {
$scope.users = response.data;
console.log(response.data);
});
});
HTML
<!doctype html>
<html >
<head>
<title>Crud app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.6.4/angular.min.js"
></script>
</head>
<body ng-app="crudApp" ng-controller="mainController">
<table>
<tr>
<th>Player ID</th>
<th>Name</th>
<th>Email</th>
<th>Team</th>
</tr>
<tr ng-repeat="user in users track by $index">
<td>{{user.PlayerID}}</td>
<td>{{user.PlayerName}}</td>
<td>{{user.PlayerEmail}}</td>
<td>{{user.PlayerTeam}}</td>
</tr>
</table>
<script src="PlayerController.js"></script>
</body>
Make it as below line, as it is case sensitive.
<tr ng-repeat="player in players | orderBy:'-created'">
<td>{{player.idPlayer}}</td>
<td>{{player.PlayerName}}</td>
<td>{{player.PlayerEmail}}</td>
<td>{{player.PlayerPassword}}</td>
<td>{{player.PlayerTeam}}</td>
</tr>
It should be players in players | orderBy:'-created'
I want to merge $output and $output1 and then populate a HTML table.
This is my code:
<?php
$link = parse_ini_file(__DIR__ . '/config.ini', true);
include("connect.php");
$output = '';
$cnn = simplexml_load_file($link['cnn']);
$bbc = simplexml_load_file($link['bbc']);
foreach($cnn->channel->item as $item){
$title = $item->title;
$description = $item->description;
$url = $item->link;
$pubDate = $item->pubDate;
$title1 = str_replace("'","\'", $title);
$description1 = str_replace("'","\'", $description);
$output[]['title'] = $title;
$output[]['description'] = $description;
$output[]['url'] = $url;
$output[]['p_date'] = $pubDate;
$sql = mysql_query("INSERT IGNORE INTO tbl_daily_news_headlines (
title,
description,
url,
pub_date,
log_date)
VALUES (
'$title1',
'$description1',
'$url',
'$pubDate',
now())")
or die(mysql_error());
}
foreach ($bbc->channel->item as $bitem){
$bbtitle = $bitem->title;
$bbdescription = $bitem->description;
$bburl = $bitem->link;
$bbpubDate = $bitem->pubDate;
$bbtitle1 = str_replace("'", "\'", $bbtitle);
$bbdescription1 = str_replace("'", "\'", $bbdescription);
$output1[]['title'] = $bbtitle;
$output1[]['description'] = $bbdescription;
$output1[]['url'] = $bburl;
$output1[]['p_date'] = $bbpubDate;
$sql = mysql_query("INSERT IGNORE INTO tbl_daily_news_headlines(
title,
description,
url,
pub_date,
log_date)
VALUES(
'$bbtitle1',
'$bbdescription1',
'$bburl',
'$bbpubDate',now())")
or die(mysql_error());
$final_output = array_merge($output, $output1);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Feed Example</title>
<link rel="stylesheet" type="text/css" href="media/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="media/css/dataTables.bootstrap.css">
<script type="text/javascript" language="javascript" src="media/js/jquery-1.12.0.min.js">
</script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="media/js/dataTables.bootstrap.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</head>
<body class="dt-example dt-example-bootstrap">
<div class="container">
<section>
<h1>FEED Test</h1>
<div class="info">
</div>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>URL</th>
<th>Publish Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Title</th>
<th>Description</th>
<th>URL</th>
<th>Publish Date</th>
</tr>
</tfoot>
<tbody>
<? foreach($final_output as $data1)
{
echo '<td>'.$data1['title'].$data1['description'].$data1['url'].$data1['p_date'].'</td>';
}
?>
</tbody>
</table>
</div>
</section>
</body>
</html>
I tried array_merge() but it's not working.
I also tried:
$data = $output + $output1;
Where am I wrong, did I incorrectly place my loops?
EDIT:
So after i try array_merge($output,$output1); its just outputs just last element of array, second method is same
i just try to do some inner foreach like
<? foreach($output as $data)
{
foreach($output1 as $data1)
{
echo '<td>'.$data.$data1'</td>';
}
}
?>
but i got 500 error, so any ideas?
EDIT 2:
Thanks to Patrick i merge these 2 outputs but still cant get printed on table, if you look my updated code right now its print them in horizontally(Everything in 1 lane), how to get fixed?
The reason why you are only getting one element is because you are overwriting the previous value each time through your foreach loops. You need to create a new entry in your $output and $output1 arrays each time.
Instead of
$output['title'] = $title;
$output['description'] = $description;
$output['url'] = $url;
$output['p_date'] = $pubDate;
and
$output1['title'] = $bbtitle;
$output1['description'] = $bbdescription;
$output1['url'] = $bburl;
$output1['p_date'] = $bbpubDate;
You should have
$output[]['title'] = $title;
$output[]['description'] = $description;
$output[]['url'] = $url;
$output[]['p_date'] = $pubDate;
and
$output1[]['title'] = $bbtitle;
$output1[]['description'] = $bbdescription;
$output1[]['url'] = $bburl;
$output1[]['p_date'] = $bbpubDate;
for DataTables you want it in some sort of JSON format. Here's how I'd do it using what you have there, and quickly (untested)
<?php
$final_output = array_merge($output, $output1);
and HTML/Javascript
<script type="text/javascript">
var php_data = <?php echo json_encode($final_output); ?>
$("#example").DataTable({
data: php_data
});
</script>
<table id="example">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>URL</th>
<th>Publish Date</th>
<tr>
</thead>
</table>
However, a much nicer way to do this would be via ajax. Check the docs out for DataTables: https://www.datatables.net/examples/ajax/
and an example of how you might format your data if you don't use ajax:
https://www.datatables.net/examples/data_sources/js_array.html
The table's data in CDs.php is pulled from a DB. Clicking on the table headers sorts the columns. Now, I want this page (CDs.php) to be editable when the user double-clicks on something in the table rows to type their changes. For example, the user can double-click on "1999 Grammy Nominees" and change it to "2014 Grammy Winners". This change on the site then updates the title inside the DB. I'm not sure how to do this...any ideas/suggestions on how I should go about this? Thanks in advance.
Note: I want the user to be able to type their changes...no drop-down select options or anything like that.
Note: I only want Title, Artist, and Price to be editable.
Note: I got the table columns to be sortable from --> http://www.dougv.com/2009/06/13/sorting-your-mysql-results-set-in-php-using-jquery-and-a-more-traditional-approach/
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sortable Table Columns</title>
<link href="../demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sortedtable").tablesorter({ sortlist: [0,0] });
});
</script>
<style type="text/css">
#sortedtable thead th {
color: #00f;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<?php
include("include.php");
switch($_GET['c']) {
case "1":
$col = "Title";
break;
case "2":
$col = "Artist";
break;
case "3":
$col = "Country";
break;
case "4":
$col = "Company";
break;
case "5":
$col = "Price";
break;
default:
$col = "Year";
}
if($_GET['d'] == "1") {
$dir = "DESC";
}
else {
$dir = "ASC";
}
$dbc = mysql_connect($host, $user, $pass);
if (!$dbc) {
echo "Cannot connect to db server";
}
elseif(!mysql_select_db("database")) {
echo "Cannot select database";
}
else {
if(!$rs = mysql_query("SELECT * FROM CD ORDER BY Title")) {
echo "Cannot parse query";
}
elseif(mysql_num_rows($rs) == 0) {
echo "No records found";
}
else {
echo "<table id=\"sortedtable\" border='3' class=\"bordered\" cellspacing=\"0\">\n";
echo "<thead>\n<tr>";
echo "<th bgcolor='#FFFF00'>Title</th>";
echo "<th bgcolor='#FFFF00'>Artist</th>";
echo "<th bgcolor='#FFFF00'>Country</th>";
echo "<th bgcolor='#FFFF00'>Company</th>";
echo "<th bgcolor='#FFFF00'>Price</th>";
echo "<th bgcolor='#FFFF00'>Year</th>";
echo "</tr>\n</thead>\n";
while($row = mysql_fetch_array($rs)) {
echo
"<tr>
<td>$row[Title]</td>
<td>$row[Artist]</td>
<td>$row[Country]</td>
<td>$row[Company]</td>
<td>$row[Price]</td>
<td>$row[Year]</td>
</tr>\n";
}
echo "</table><br />\n";
}
}
?>
</body>
</html>
CDs.php
Database:
You might want to take a look at: Change Label to Textbox on edit hyperlink click
I know it's for a label but it can easily be converted to your case. I'd personally use the "update 1" from the second answer.
To detect the change you'll probably want to detect when the user hits enter, therefore I suggest you take a look at this: Detect enter in input elements of a certain class
When you've done that you can convert the input box back to a table cell and make an ajax call to a PHP page which then adds the value to the database.
Visit this jquery API page to learn more about the ajax call: http://api.jquery.com/jquery.get/
You could use the contenteditable="true" HTML attribute, then on blur (focusing out) you send the value to PHP using AJAX. Ive put together a simple example. Its not complete but answers the question, it leaves you to implement it.
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
header('Content-Type: application/json');
exit(json_encode(array(
'result'=>'Received: '.$_POST['value'].' from AJAX, for row '.$_POST['row_id'].' column '.$_POST['column'],
)));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
jQuery(document).ready(function(){
$.fn.editable = function(column){
$(this).attr('contenteditable', true);
$(this).blur(function () {
var ajax = $.ajax({
url: './',
type: "POST",
data: { row_id: $(this).parent().attr('id'), column:column, value: $(this).html()},
dataType: "json"
});
ajax.done(function(data){
$('#result').html(data.result);
});
$(this).attr('contenteditable', false);
});
return this;
};
});
</script>
</head>
<body>
<div id="result"></div>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr id="row_id_1">
<td width="33%" ondblclick="$(this).editable('col_a')">Value A</td>
<td width="33%" ondblclick="$(this).editable('col_b')">Value B</td>
<td width="34%" ondblclick="$(this).editable('col_c')">Value C</td>
</tr>
</table>
</body>
</html>
How do I display all the records from a query that I executed into a table when I choose a id from my car_types drop-down-menu.
Here is the code I had done so far, I keep getting an error whenever I run my SQL query
$carResult = mysqli_query($link, $carQuery), how do I solve it or is my method of doing wrong?
Error: Warning: mysqli_error() expects exactly 1 parameter, 0 given in C:\xampp\htdocs\Cars\carShop.php on line 54
index.php
<?php
$link = mysqli_connect('localhost', 'root', '', 'db_car');
if (!$link) {
die(mysqli_error($link));
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Car Shop</title>
<script type="text/javascript" src="script/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#type").change(function() {
$.ajax({
type: "GET",
url: "getCars.php",
data: "type_id=" + $(this).find(":selected").val(),
cache: false,
success: function(msg){
query = $.parseJSON(msg);
$('#query').html(query);
}
});
});
$("#type").trigger('change');
});
</script>
</head>
<body>
<select id="type" name="type">
<?php
$query = "SELECT * FROM car_types";
$result = mysqli_query($link, $query) or die(mysqli_error());
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value ='" . $row['id'] . "'>" . $row['type_name'] . "</option>";
}
?>
</select><br>
<table border="1">
<tr>
<th>Car ID</th>
<th>Name</th>
<th>Price</th>
</tr>
<?php
$carQuery = " <div id='query'></div>";
echo $carQuery;
$carResult = mysqli_query($link, $carQuery) or die(mysqli_error());
while($row = mysqli_fetch_assoc($carResult)) { ?>
<tr>
<td><?php echo $row['id'];?><td>
<td><?php echo $row['name'];?><td>
<td><?php echo $row['price'];?><td>
</tr>
<?php } ?>
</table>
</body>
</html>
getCars.php
<?php
$link = mysqli_connect('localhost', 'root', '', 'db_car');
if (!$link) {
die(mysqli_error($link));
}
$typeId = $_GET['type_id'];
$query = "SELECT * FROM cars WHERE type_id = $typeId";
echo json_encode($query);
?>
You are trying to execute a query
$carQuery = " <div id='query'></div>";
echo $carQuery;
$carResult = mysqli_query($link, $carQuery) or die(mysqli_error());
While $carQuery is a div with a query in it, that's not gonna work. Try to execute this query within getCars.php and return the result.
Something like this:
<?php
$link = mysqli_connect('localhost', 'root', '', 'db_car');
if (!$link) {
die(mysqli_error($link));
}
$typeId = $_GET['type_id'];
$query = "SELECT * FROM cars WHERE type_id = $typeId";
$carResult = mysqli_query($link, $query) or die(mysqli_error());
while($row = mysqli_fetch_assoc($carResult)) {
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['id']."</td>";
echo "</tr>";
}
?>
All you have to do now is assign the results to the right table via the success function of your AJAX call.
In your index.php
<?php
$link = mysqli_connect('localhost', 'root', '', 'db_car');
if (!$link) {
die(mysqli_error($link));
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Car Shop</title>
<script type="text/javascript" src="script/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#type").change(function() {
$.ajax({
type: "GET",
url: "getCars.php",
data: "type_id=" + $(this).find(":selected").val(),
cache: false,
success: function(rslt){
$('#carResult').html(rslt);
}
});
});
$("#type").trigger('change');
});
</script>
</head>
<body>
<select id="type" name="type">
<?php
$query = "SELECT * FROM car_types";
$result = mysqli_query($link, $query) or die(mysqli_error());
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value ='" . $row['id'] . "'>" . $row['type_name'] . "</option>";
}
?>
</select><br>
<table border="1">
<thead>
<tr>
<th>Car ID</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="carResult">
</tbody>
</table>
</body>