Update mysqli query from html select - php

Question

I have a tests.php web page that successfully creates and populates a html table using data from a mysql database on an online server. Next I want to make the web page interactive by adding html select to limit the number of rows the sql query returns. I've added the html select code and amened my sql query to use a variable for LIMIT. The issue I have is how to make the query run when the select dropdown is changed. I'm assuming some kind of page refresh needs to be called but unsure how to go about this. For example would I need to enclose the html as a from and have a submit button to make this work? This IS NOT what I want, ideally the user presses html select and then the page refreshes or re runs the sql database query.
Please be kind this is the first php code I've written.
My select code
<select name="limit" id="limit">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
The php code
</body>
</html>
<?php
$limit = 10;
if(isset($_POST["limit"])) $limit = $_POST["limit"];
$con=mysqli_connect("localhost","user","password","database");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM TableName WHERE Region='Home' ORDER BY TeamName ASC LIMIT $limit");
echo "<table class='sample' style='width:50%'>
<tr>
<th>Team Name</th>
<th># Players</th>
<th>Venue</th>
<th>Date</th>
<th>Score</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['TeamName'] . "</td>";
echo "<td>" . $row['NumPlayers'] . "</td>";
echo "<td>" . $row['Venue'] . "</td>";
echo "<td>" . $row['Date'] . "</td>";
echo "<td>" . $row['Score'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
UPDATE
I think I may have a simpler solution using javascipt although it's not working correctly.
Using javascript function:
window.location.reload(true);
and change my html select
<select onchange="refresh.call()">
However when the page re loads it's using the typed $limit value
$limit =10;
instead of the select value.
The page refresh is working but is there a way to inject the html select value somehow?

Answer 1

Sanitizing Input
First off, you need to sanitize your limit variable as it's insecure to allow input directly into the SQL.
see:
What's the best method for sanitizing user input with PHP? AND
https://www.shift8web.ca/2015/06/securing-your-mysql-queries-from-sql-injection-in-php/
Single Page App Approach
Secondly, you need to decide if you will re-write the html notes using javascript ( in which case you will make an ajax/jquery request). Then you will rewrite the html using some framework or javascript ( innerHTML = '') or editing the DOM tree.
See:
Ajax tutorial for post and get
AND
https://stackoverflow.com/a/19527642/1688441
Reloading the page
If you decide you don't want to use javascript to rewrite the Dom tree, then the only solution is to refresh the entire page using either a GET or POST with the limit parameter.
So you will use an onChange listener, and call the page again with a limit parameter.
See: Reload page after user clicks on combobox (with some rules)