使用jQuery從輸入值計算總價

Question

我正在開發一個Web應用程序，其中我必須從動態添加的輸入字段中計算總價格。

基本上，我在數據庫中搜索項目，然后出現一個下拉列表，其中包含與搜索匹配的項目，當我單擊其中一個項目時，它會像下面的圖片一樣連續顯示。

現在我需要的是幫助獲得所有物品的總價格（數量*價格/單位-折扣（如果有）），每次我添加/刪除物品或更改變量之一（數量，價格，必須重新計算） /單位，折扣）。

這是一些用於生成輸入的代碼（我正在使用laravel 5.0）

<div class="row">
<div class="large 12 columns">
        <div class="large-1 columns">
        <label>Quantity</label>
        {!! Form::text("units[]","1") !!}
    </div>
    <div class="large-1 columns">
        <label>GroupNR</label>
        {!! Form::text("article_group[]",$item->article_group_id) !!}
    </div>
    <div class="large-3 columns">
        <label>Item name</label>
        {!! Form::text("article[]",$item->article) !!}
    </div>
    <div class="large-3 columns">
        <label>Description</label>
        {!! Form::text("description_en[]",$item->description_en) !!}
    </div>
    <div class="large-1 columns">
        <label>Price/Unit</label>
        {!! Form::text("unit_price[]",$item->base_price * $rentalPrice[$days] / 100 + $item->start_price) !!}
    </div>
    <div class="large-1 columns">
        <label>Discount</label>
        {!! Form::text("discount[]","0") !!}
    </div>
    <div class="large-1 columns">
        <label>Invoice</label>
        {!! Form::checkbox("invoice[]",null,["checked"]) !!}
    </div>
    <div class="large-1 columns">
        <label>D. Note</label>
        {!! Form::checkbox("delivery_note[]",null,["checked"]) !!}
    </div>
</div>

對於那些不熟悉Laravel的人，這是html輸出：

<form id="itemForm">
  <div class="row">
    <div class="large-12 columns">
            <div class="large-1 columns">
            <label>Quantity</label>
            <input name="units[]" type="text" value="1">
        </div>
        <div class="large-1 columns">
            <label>GroupNR</label>
            <input name="article_group[]" type="text" value="2401">
        </div>
        <div class="large-3 columns">
            <label>Item name</label>
            <input name="article[]" type="text" value="Item 1">
        </div>
        <div class="large-3 columns">
            <label>Description</label>
            <input name="description_en[]" type="text" value="Description">
        </div>
        <div class="large-1 columns">
            <label>Price/Unit</label>
            <input name="unit_price[]" type="text" value="7500">
        </div>
        <div class="large-1 columns">
            <label>Discount</label>
            <input name="discount[]" type="text" value="0">
        </div>
        <div class="large-1 columns">
            <label>Invoice</label>
            <input checked="checked" name="invoice[]" type="checkbox">
        </div>
        <div class="large-1 columns">
            <label>D. Note</label>
            <input checked="checked" name="delivery_note[]" type="checkbox">
        </div>
    </div>
</div>
<div class="row">
    <div class="large 12 columns">
            <div class="large-1 columns">
            <label>Quantity</label>
            <input name="units[]" type="text" value="1">
        </div>
        <div class="large-1 columns">
            <label>GroupNR</label>
            <input name="article_group[]" type="text" value="1114">
        </div>
        <div class="large-3 columns">
            <label>Item name</label>
            <input name="article[]" type="text" value="Item 2">
        </div>
        <div class="large-3 columns">
            <label>Description</label>
            <input name="description_en[]" type="text" value="Description">
        </div>
        <div class="large-1 columns">
            <label>Price/Unit</label>
            <input name="unit_price[]" type="text" value="345">
        </div>
        <div class="large-1 columns">
            <label>Discount</label>
            <input name="discount[]" type="text" value="0">
        </div>
        <div class="large-1 columns">
            <label>Invoice</label>
            <input checked="checked" name="invoice[]" type="checkbox">
        </div>
        <div class="large-1 columns">
            <label>D. Note</label>
            <input checked="checked" name="delivery_note[]" type="checkbox">
        </div>
    </div>
</div>
</form>

幫助將不勝感激:)

問候

Answer 1

您可以使用：

$('.row').each(function(){
  var quantity = parseInt( $(this).find('[name="units[]"]').val(),10)
  var price = parseInt( $(this).find('[name="unit_price[]"]').val(),10)
  total += quantity * price;
});

工作演示