Не удалось рассчитать цену и кол-во на столе с помощью Php Ajax

Question

Я создаю сайт электронной коммерции для моего проекта на последний год. В то время как я создаю проект, в котором я столкнулся с проблемой с продуктом, я могу добавить карту, но когда я просматриваю продукт карты, который я добавил в карту.Моя проблема заключается в том, что если дать кол-во, он автоматически вычислит и отобразит результат в текстовом поле.Я приложил изображение ниже того, что я пробовал до сих пор.Но не смог вычислить итоговую и итоговую итоги. Показать продукты

<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);
            }
        });
    }

Автоматический расчет цены * Кол-во

$(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

Вы не должны добавлять несколько элементов с одинаковым идентификатором на страницу

Можете ли вы попробовать

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);
  }
});

Это демо: https://codepen.io/phuongnm153/pen/bymYOQ

Answer 2

Когда вы получаете $ ("# price"). Val () и $ ("# qty"). Val () в jQuery, но у вас много $ ("#price ") & $ (" # qty ") дублируется.Вы должны запустить это в консоли.Я надеюсь, что это полезно для вас