How to add a new html table row each time mysql query is executed

Question

I was wondering if it is possible to query a database, and each time a submit button is clicked, it will add a new row to the table, instead of refreshing the page.

You see, what's happening is that when I run the query, it will add the row successfully, but when I run the query again, it will refresh the page, essentially only being able to add only one row at a time.

Basically, I want to be able to create a table which will add a product to the list each time I scan a barcode with a barcode scanner. As the user scans the code, the query will execute to grab the relevant data from the database, and display a row.

$barcode = $_POST["Barcode"];
$query = "Select * from products WHERE ProductBarcode = $barcode";
$result = $mysqli->query($query);
					
if ($result->num_rows > 0) {
	echo "<table>
	<tr>
   		<td><strong>ID</strong></td>
   		<td><strong>Name</strong></td>
   		</tr>";
   	// output data of each row
   	while($row = $result->fetch_assoc()) {
echo "<tr><td><input type='checkbox' value='".$row['Row_ID']."' />".$row['Row_ID']."</td>
<td>".$row['ProductName']." "."</td></tr>";
}
	echo "</table>";
} else {
    echo "0 results";
   	}
$mysqli->close();

You would probably need to use Jquery or Javascript to achieve that without refreshing page — Imphusius
– Imphusius, Commented Oct 9, 2016 at 15:38

Community · Accepted Answer · 2017-05-23 12:06:50Z

0

You can use jQuery/ajax to achieve this. Check out this post. I believe it has exactly what you're looking for: Creating a table with mysql, php and ajax (with jquery)

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Oct 9, 2016 at 15:54

c-bro

4862 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paul Samaroo Over a year ago

hmmm yea something like what I want, but I want that 'get data' button to act as the submit button for a form, since the barcode will be entered by the user. So when that button is clicked, then the query will be executed to grab the data corresponding to the barcode entered.

c-bro Over a year ago

Yeah, so onclick of the 'get data' button you call a javascript function. In this function you grab the data from the barcode field and send it via Ajax to your php script. You can package up parameters in your Ajax call then grab these parameters server side using php.

Paul Samaroo Over a year ago

Unfortunately I have no experience using Ajax, and barely any Javascript experience lol...so I barely understand you xD Sorry :(

Rajat Jain · Accepted Answer · 2016-10-09 15:59:19Z

0

You can do this Using Ajax

I'm writing an Psudo code which will give you and idea how to do this

Step 1: create a table and define table Id

<table id="myTable">
<tr>
    <td><strong>ID</strong></td>
    <td><strong>Name</strong></td>
    </tr>
</table>

Step 2: Submit Your Barcode Data or product Id using Ajax

<script>
$(document).on('click', "#submitButton", function () {
var barcode = $("#barcode").val();
    $.ajax({
                url: 'getProduct.php',
                dataType: 'json',
                type: 'POST',
                data: {'Barcode':barcode},
            success: function (data) {
                if (data.products.length > 0) {
                   $(data.products).each(function(index,element){
                        $("#myTable").append("<tr><td><input type='checkbox' value='"+ element.product_id+"' />"+ element.product_id+"</td>
    <td>"+ element.product_name+"</td></tr>");
                   });
                } else {
                  alert("No Products Found");
                }  
            },
            beforeSend: function () {
                showLoader();
            },
            complete: function () {
                hideLoader();
            },
        });
 });
</script>

Step 3: your getProduct.php Code will be like this

$barcode = $_POST["Barcode"];
$query = "Select * from products WHERE ProductBarcode = $barcode";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $products = mysqli_fetch_all ($result, MYSQLI_ASSOC);
} else {
    $products = [];
}
echo json_encode($products);
$mysqli->close();

answered Oct 9, 2016 at 15:59

Rajat Jain

1,0222 gold badges15 silver badges25 bronze badges

7 Comments

Paul Samaroo Over a year ago

Hi, I tried your code, however, when I click the submit button, nothing happens.

Rajat Jain Over a year ago

try using alert("hello"); after $(document).on('click',

Paul Samaroo Over a year ago

Nope...Same problem :(

Rajat Jain Over a year ago

See your browser console, solve if any errors are displaying there

Paul Samaroo Over a year ago

No errors...but i'm probably not structuring everything correctly. Is it possible for you to help me out there?

|

Collectives™ on Stack Overflow

How to add a new html table row each time mysql query is executed

2 Answers 2

3 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related