Untitled

<Head>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>

<link href="style.css" type="text/css" rel="stylesheet" />
<style>
#product{
width:500px;
text-align: center;
}


#quantity{
width: 50px;
text-align: center;
}

#price{
text-align: right;
}

input:focus {
outline:none;
}

input{
width: 100%;
}

input[type="text"]
{
font-size:1em;
text-align: center;
}

td
{
font-size: 1em;
font-family: arial;
white-space: nowrap;  /** added **/
}

th {
font-size: 1.2em;
font-family: arial;
}

table{
table-layout: auto;
border-spacing: 10px 0;
}
</style>
</head>

<div id="shopping-cart">
    <div class="txt-heading">
        <div class="txt-heading-label">Shopping Cart</div>
        <a id="btnEmpty"><img src="empty-cart.png" id= "emptycart" alt="empty-cart" title="Empty Cart" /></a>
    </div>
<?php
session_start();

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "secure_login";
$member_id = $_SESSION['login_user'];

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

<?php
 $query = "select * from tbl_cart WHERE member_id= '$member_id'";
 $result = mysqli_query($conn,$query);
 if (!$result) {
 printf("Error: %sn", mysqli_error($conn));
 exit();
}

echo "<table class='anyClass'>";
echo "<tr>
         <th>Product</th>
         <th>Price</th>
         <th>Quantity</th>
         <th>Remove</th>
         <th>Add</th>

    </tr>";
while($row = $result->fetch_assoc()) {
echo "<tr>

          <td id='product'>".$row['product_id']."</td>
          <td id= 'price'>".'$'.$row['price']."</td>
          <td id= 'quantity'>". "<input style='border:none' type = 'text' onchange='edit()' 'class = 'product-item' class= 'change' value= $row[quantity] name= $row[id] data-id= $row[id] >" . "</td>
          <td><span class='delete' data-id= $row[id] >Delete</span></td>
  </tr>";
}
echo "</table>";
?>


<script>
$(document).ready(function(){

// Delete
$('.delete').click(function(){
var el = this;
var id = $(el).data('id');

// AJAX Request
$.ajax({
url: 'remove.php',
type: 'POST',
data: { id: id},
success: function(response){

// Removing row from HTML Table
$(el).closest('tr').css('background','tomato');
$(el).closest('tr').fadeOut(800, function(){
 $(this).remove();
});

}
});
});
});
</script>
<script>

$( ".change" ).change(function() {
var el = this;
var id = $(el).data('id');

// AJAX Request
$.ajax({
url: 'update.php',
type: 'POST',
data: { id: id quantity: value},
success: function(response){
}
});
});
});
</script>

<?php
session_start();

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "secure_login";
$member_id = $_SESSION['login_user'];

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$quantity = $_POST['quantity'];
$id = $_POST['id'];

$query = "UPDATE tbl_cart SET quantity= $quantity WHERE id= $id";
mysqli_query($conn,$query);
?>