2016-09-29 110 views
0

我正在製作評論購物車&結賬窗體。如果用戶想要更改我想要的數量,如果數量發生變化,其價格將自動更改。如何更新購物車中的數量如有更改價格

請幫助調整相同的JS減號或分開的代碼。

圖片低於審議車&結帳的: enter image description here

JS的加&減:爲正負

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

HTML/PHP:

<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> 
+1

你需要爲這個 – madalinivascu

+0

您可以使用Ajax jQuery的? – dcalap

+0

在jquery on change事件中再做與總量或觸發總量函數有關的函數。 –

回答

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鏈接)suppossed Ajax調用使用jQuery,更新數據庫上的每個數量的變化:

$.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"); 
      }); 
    }) 
+0

以及你的答案正在工作,但我想在數據庫中也自動更新。你能幫忙嗎? –

+0

我已經更新了JSFiddle鏈接(https://jsfiddle.net/5moztzm1/2)和假定的ajax調用。你需要適應你的PHP腳本。問候。 – dcalap

+0

我試過了,它不更新....這是我的更新腳本:'<?php include(「inc/db。PHP 「); 在session_start(); $ ses_mem \t = \t $ _SESSION [ 'ses_user_id']; 提取物($ _ POST); $ PP \t = \t mysqli_query(」 更新temp_cart 集數量='$ picpac」 其中ses_mem =‘$ ses_mem’ 「);? >' –