Question

我正在为我的最后一个项目创建一个电子商务站点。在创建项目时，我遇到产品问题可以添加卡，但是当我查看显示的产品时，我将其添加到卡中。我的问题是，如果给定数量，它将自动计算并在总textbox.and最后的电话显示下面显示结果。我在到目前为止尝试过的图像下方附加了图像。但是无法计算总数和最终总数。 显示产品

<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

当您在jQuery中获得 $（“＃price”）。val（）和 $（“＃qty”）。val（）时，您有很多$ （“ #price”）和$（“＃qty”）复制。您应该在控制台中运行它。希望对您有帮助

Answer 2

您不应在页面中附加多个具有相同ID的元素

你能尝试

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

无法使用Php Ajax计算桌子上的价格和数量

2 个答案: