Running mysql queries onclick from index page - php

Question

I have an index.php on my localhost and I'd like to put several buttons to run different sql queries here. The queries will be like this one :
<table class="table1">
<tr>
<th>Date</th>
<th>Model</th>
<th>Type</th>
<th>InProduction</th>
<th>Price</th>
<th>Range</th>
<th>MaxSpeed</th>
<th>HP</th>
<th>Country</th>
<th>EType</th>
<th>Make</th>
<th>MPG</th>
<th>Seats</th>
</tr>
<?php
include ("config.php");
$sql = "SELECT Date, Model, Type, InProduction, Price, Range, MaxSpeed, HP, Country, EType, Make, MPG, Seats FROM Auto order by Date DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$counter = 0;
while($row = $result->fetch_assoc())
{
echo "<tr><td>" . $row["Date"]."</td><td>" . $row["Model"] . "</td><td>"
. $row["Type"]. "</td><td>". $row["InProduction"]. "</td><td>". $row["Price"]. "</td><td>".$row["Range"]. "</td><td>". $row["MaxSpeed"].
"</td><td>". $row["HP"]."</td><td>". $row["Country"]."</td><td>". $row["Etype"]."</td><td>". $row["Make"]. "</td><td>". $row["MPG"].
"</td><td>". $row["Seats"]."</td></tr>";
$counter++;
if($counter % 33 == 0) { ?>
</table>
<table class="table1">
<tr>
<th>Date</th>
<th>Model</th>
<th>Type</th>
<th>InProduction</th>
<th>Price</th>
<th>Range</th>
<th>MaxSpeed</th>
<th>HP</th>
<th>Country</th>
<th>EType</th>
<th>Make</th>
<th>MPG</th>
<th>Seats</th>
</tr>
<?php }
}
echo "</table>";
} else { echo "0 results"; }
$conn->close();
?>
</table>
Here I included all the parameters to be displayed on the page. Instead, what I would like to do is to use different parameters in each query. So with every click of a button, I'll be able to see different parameters listed as a table on the index page. So I plan to create several php files to list different parameters, and run them with the click of a button on the index.php. How can I do this with onclick button? and is this the most suitable way for this task? Note: I will publish this only locally. Thanks.

Answer 1

I found an ajax solution to the problem. It is not very neat and short but it works. I am open to any shorter way to achieve this task, I'd be grateful if you share. thanks. Here is the source of the solution: http://javascript-coder.com/tutorials/re-introduction-to-ajax.phtml
So for every button, the ajax code needs to be repeated with corresponding Id's.
HTML:
<div id="querydiv"> </div>
<button id='actbutton1'>query1</button>
AJAX:
<script>
document.getElementById('actbutton1').onclick=function()
{
var xhr = new XMLHttpRequest();
xhr.open("GET", "query1.php", true);
xhr.onreadystatechange = function ()
{
if (xhr.readyState==4 && xhr.status==200)
{
document.getElementById("querydiv").innerHTML=xhr.responseText;
}
}
xhr.send();
}
</script>

Answer 2

Depending on what exactly you want to do, you can also just use a query string to switch on/off of what queries/data you want the user to see. You can easily add the query string to the url in a button as you wish by simply setting the parameter in the onclick event:
<button onclick="location.url = '/mypage.php?show=firstdata';">Button1</button>
The switch of the queries in the PHP could look like the following:
if($_GET['show'] == "firstdata") {
//
// the first type query here
//
}elseif($_GET['show'] == "seconddata") {
//
// the second type query here
//
}