Couldn't Calculate Price and Qty on table using Php Ajax - php

Question

I am creating a ecommerce site for my final year project.while I am creating a project I ran in to the problem with product shall be able add the card but when I view the card product shown which I added into the card.my problem is if the give qty it will auto calculation and display result on the total textbox.and final totel show display below. I attached image below what i tried so far. But couldn’t calculate the total and final total.
Display the Products
<script>
getProducts();
function getProducts() {
$.ajax({
type: 'GET',
url: 'all_cart.php',
dataType: 'JSON',
success: function(data) {
data.forEach(function(element) {
var id = element.id;
var product_name = element.product_name;
var price = element.price;
$('#mytable tbody').after
(
'<tr> ' +
'<td>' + id + '</td>' +
'<td>' + product_name + '</td>' +
'<td>' + price + '</td>' +
"<input type='hidden' name='price' value='" + price + "'>" +
'<td>' + "<input type = 'text' id='qty' name='qty'/>" + '</td>' +
'<td>' + "<input type = 'text' id='amount'/>" + '</td>' +
'</tr>');
});
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
}
Auto calcaltion the price * qty
$(function() {
$("#price, #qty").on("keydown keyup click", qty);
function qty() {
var sum = (
Number($("#price").val()) * Number($("#qty").val())
);
$('#amount').val(sum);
console.log(sum);
}
});

Answer 1

You dont should append multiple elements with same ID in a page
Can you try
function getProducts() {
$.ajax({
...
$('#mytable tbody').after
(
'<tr> ' +
'<td>' + id + '</td>' +
'<td>' + product_name + '</td>' +
'<td>' + price + '</td>' +
"<input type='hidden' name='price' class='price' value='" + price + "'>" +
'<td>' + "<input type = 'text' class='qty' name='qty'/>" + '</td>' +
'<td>' + "<input type = 'text' class='amount'/>" + '</td>' +
'</tr>');
});
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
}
$(function() {
$(".price, .qty").on("keydown keyup click", function () {
var price = $(this).parents('tr').find('.price');
var qty= $(this).parents('tr').find('.qty');
var sum = (
Number($(price).val()) * Number($(qty).val())
);
$(this).parents('tr').find('.amount').val(sum);
calculateAmount();
});
function calculateAmount() {
var total = 0;
$('.amount').each(function(e){
total += Number($(this).val());
});
$('#total-amount').text(total);
}
});
This is a demo: https://codepen.io/phuongnm153/pen/bymYOQ

Answer 2

When you get $("#price").val() and $("#qty").val() in jQuery but you have many $("#price") & $("#qty") duplicate. You should be run this in console.
I hope it's helpful for you