添加输入,乘以价格,显示总计

时间:2013-10-09 16:36:18

标签: javascript jquery forms math

我正在尝试为在线T恤订单创建一个非常简单的PHP表单。除了最后的计算之外,我几乎已经完成了所有工作。我希望将尺寸加起来,乘以价格(比如说10.00美元),然后显示总数。目前它只显示总数量。

我知道我错过了乘法步骤,但我尝试的一切都失败了。如果你能给我一些方向,那就太好了。感谢

http://jsfiddle.net/hSxkW/14/

形式:

<div>
<input name=S />
<input name=M />
<input name=L />
<input name=XL />
<input name=XXL />
<input name=XXXL /><br>
Total: $<span class=size></span>
</div>

JS:

$('input[name=S], input[name=M], input[name=L], input[name=XL], input[name=XXL], input[name=XXXL]').keyup(function() {
    var divParent = $(this).closest('div');
    var S = $('input[name=S]', divParent).val()-0;
    var M = $('input[name=M]', divParent).val()-0;
    var L = $('input[name=L]', divParent).val()-0;;
    var XL = $('input[name=XL]', divParent).val()-0;
    var XXL = $('input[name=XXL]', divParent).val()-0;
    var XXXL = $('input[name=XXXL]', divParent).val()-0;
    if (S >= 0 && M >= 0 && L >= 0 && XL >= 0 && XXL >= 0 && XXXL >= 0)
        $('span.size', divParent).text(S+M+L+XL+XXL+XXXL);
});

2 个答案:

答案 0 :(得分:0)

对我来说似乎很基本。

变化:

if (S >= 0 && M >= 0 && L >= 0 && XL >= 0 && XXL >= 0 && XXXL >= 0) $('span.size', divParent).text(S+M+L+XL+XXL+XXXL);

为:

if (S >= 0 && M >= 0 && L >= 0 && XL >= 0 && XXL >= 0 && XXXL >= 0) $('span.size', divParent).text(10*(S + M + L + XL + XXL + XXXL));

<强> jsFiddle example

答案 1 :(得分:0)

我会做这样的事情:

<div id="orderContainer">
   <input data-price="{priceS}" data-oldprice="0" name=S />
   <input data-price="{priceM}" data-oldprice="0" name=M />
   <input data-price="{priceL}" data-oldprice="0" name=L />
   <input data-price="{priceXL}" data-oldprice="0" name=XL />
   <input data-price="{priceXXL}" data-oldprice="0" name=XXL />
   <input data-price="{priceXXXL}" data-oldprice="0" name=XXXL /><br>
   Total: $<span class="size">0</span>
</div>

<script>
    jQuery(function($){
       var container = $("#orderContainer");
       container.find("input").keyup(function(){
           var item = $(this);
           var totalspan = container.find("span.size");
           var price = parseInt(item.data("price"))*parseInt(item.val());
           var oldprice = parseInt(item.data("price"))*parseInt(item.data("oldprice"));
           var totalprice = parseInt(totalspan.html());
           item.data("oldprice", price);
           totalspan.html(totalprice-oldprice+price);
       });
    });
</script>

如何为输入添加价格 - 完全取决于您。