Perhaps the following might give you an idea of how you might proceed. The PHP that processes the POST request has been designed to work with Prepared Statements but is not yet complete and I will stress that this is not tested!
Please look through the html and read the comments which hopefully explain what is going on at that point. Obviously the content of the table ( ie: each table row and cells etc ) will be dynamically generated by db query results - below is static for demo.
The pseudo db processing code here uses mysqli but it looks like you are using PDO so use that as a guide only... look at Prepared Statements here
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
</head>
<body>
<!--
using a single form to process multiple records requires
a little more consideration than for a single record.
Submitting the form "as-is" leaves you with no way to know
which particular record PHP should update because they are
all suitable candidates potentially.
One method I made reference to was to use a single form with
just the fields required for processing that are populated
by javascript. To that end...
* Assign a name to the form for easy identification.
* remove the `[]` from field names in the form.
* remove the two hidden fields and assign `dataset` attributes to each button
The table below is a loose facsimile of what I deduced the
original table to look like...more or less.
-->
<form method='post' name='update' action='updatecart.php'>
<table>
<tr>
<th>Update</th>
<th>Remove</th>
<th>Image & Link</th>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
<tr>
<td><button class="btn" type="button" name="update" data-cartid="23" data-itemid="1">Update</button></td>
<td><button class="btn" type="button" name="remove" data-cartid="23" data-itemid="1">Remove</button></td>
<td><a href="product_detail.html?itemid=1"><img alt="" src="/photos/banana.jpg" width=100 height=100 /></a></td>
<td>Senga-X</td>
<td><input type="number" name="quantity" min=1 max=74 value=17 /></td>
<td>43</td>
<td>93</td>
</tr>
<tr>
<td><button class="btn" type="button" name="update" data-cartid="69" data-itemid="1">Update</button></td>
<td><button class="btn" type="button" name="remove" data-cartid="69" data-itemid="1">Remove</button></td>
<td><a href="product_detail.html?itemid=1"><img alt="" src="/photos/apple.jpg" width=100 height=100 /></a></td>
<td>Senga-Y</td>
<td><input type="number" name="quantity" min=1 max=45 value=10 /></td>
<td>35</td>
<td>1505</td>
</tr>
</table>
<!--
use only the number of hidden elements as are
needed in the sql later for update/delete
-->
<input type='hidden' name='cartid' />
<input type='hidden' name='itemid' />
<input type='hidden' name='qty' />
<input type='hidden' name='task' />
</form>
<script>
document.querySelectorAll('button[name="update"],button[name="remove"]').forEach( bttn=>{
bttn.addEventListener('click',function(e){
// stop the form from being submitted conventionally
e.preventDefault();
// obtain reference to the form
let form=document.forms.update;
// set values of hidden elements based upon the particular button that was clicked
form.cartid.value=this.dataset.cartid;
form.itemid.value=this.dataset.itemid;
form.qty.value=this.parentNode.parentNode.querySelector('input[name="quantity"]').value;
form.task.value=this.name;
// send your form with only these values!
form.submit();
});
});
</script>
</body>
</html>
And the PHP to process the request:
<?php
#updatecart.php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpwd = 'xxx';
$dbname = 'xxx';
$db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );
if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['itemid'], $_POST['cartid'], $_POST['qty'], $_POST['task'] ) ){
$cartid=$_POST['cartid'];
$itemid=$_POST['itemid'];
$qty=$_POST['qty'];
$task=$_POST['task'];
switch($task){
case 'remove':
$sql='delete from cart where cart_id=?';
$stmt=$db->prepare( $sql );
$stmt->bind_param('s',$cartid);
break;
case 'update':
$sql='update cart set qty=? where cart_id=?';
$stmt=$db->prepare($sql);
$stmr->bind_param('ss',$qty,$cartid);
break;
}
#etc etc etc
exit();
}
?>
