如果购物车中的数量发生变化，如何更新价格

Question

我正在制作评论购物车＆amp;结帐表单。如果用户想要更改我想要的数量，如果数量被更改，它的价格将自动更改。

请帮助调整相同的JS减去或分开的代码。

图片位于评论购物车＆amp;结帐：

JS for Plus＆amp;减

<script type="text/javascript">
function subtractQty(){
    if(document.getElementById("number").value - 1 < 0)
        return;
    else
    document.getElementById("number").value--;
    }
</script>

HTML / PHP for plus minus：

<div class="quantity">
<input style="font-size:21px;" type="button" value="-" onclick='javascript: subtractQty();' class="">
<input id="number" type="number" value="<?php echo $qtyT; ?>" class="qty" name="picpac">
<input style="font-size:21px;" type="button" value="+"  onclick='javascript: document.getElementById("number").value++;'  class="plus">
</div>

Answer 1

您可以遵循两种不同的策略：

• 使用Ajax调用调用服务器，将数量作为参数传递，计算总金额并将其返回。
• 使用jQuery执行前端的所有操作，最后传递计算值来存储它。

In this link我用你提供的HTML为第二个编写了一个快速示例。我刚刚为计算值添加了一个div

<div id="product1_total_price">0</div>

隐藏产品基本价格的输入

<input type="hidden" id="product1_base_price" value="10">

这个带有魔力的jQuery代码：

$(document).ready(function() {

$(".operator").on('click',function() {
  $("#product1_total_price").text($("#product1_base_price").val()*$("#number").val());
 });
});

希望它有所帮助。

编辑：

我添加一个（并更新JSFiddle链接）用jQuery调用Ajax调用，以便在每次数量更改时更新数据库：

$.ajax({
        type: "GET",
        data: {
            idProduct: yourProductId,
            quantity: $("#number").val(),
            totalPrice: calculatedValue
        },
        url: "your-script.php",
        success: function(json_response) {

          if(json_response.result != 'SUCCESS') {
              // Whatever
          } else {
              alert("Updated in DB");
          });
    })