jQueryループからhtml要素配列まで3番目の要素入力で値を計算

Question

ボタンを押すときに入力フィールドを動的に追加できる次の入力フォームがあります。私はjQueryを使ってやりたいことは、私はそれぞれのreplaced_pa​​rt_qty []またはreplaced_pa​​rt_price []

<div class="form-group col-xs-1"> 
    <label>Part price</label> 
    <input type="number" class="form-control" name="replaced_part_price[]" id="replaced_part_price"> 
</div> 
<div class="form-group col-xs-1"> 
    <label>Part Qty</label> 
    <input type="number" class="form-control" name="replaced_part_qty[]" id="replaced_part_qty"> 
    </div> 
<div class="form-group col-xs-1"> 
    <label>Total cost</label> 
    <input type="number" class="form-control" name="total_cost[]" id="total_cost" readonly> 
</div> 

に.keyupイベントがあるとき、私は新しい上.clickイベントを作っTOTAL_COST []すべてのフィールドを更新することです.keyupイベントで正しく動作するようになっていないためです。.add_more_linesボタンのイベントの問題は、前の行の総コストを表示したいときにユーザーが新しい行を追加する必要があることですまた、前の行で何かを変更すると、最後の行の値だけを暗記するため、値は更新されません。

ユーザーが回線上の価格や数量を変更するたびに、その回線のtotal_costが再計算されるのが理想的です。

のjQuery

$(document).ready(function() { 

window.z = 0; 
     $('.add_more_button').click(function(){ 
     $('input[name="replaced_part_qty[]"]').each(function() { 
      window.product_quantity = $(this).val(); 
     }); 
     $('input[name="replaced_part_price[]"]').each(function() { 
      window.product_price = $(this).val(); 
     }); 

     $('input[name="total_cost[]"]').each(function() { 
      $('input[name="total_cost[]"]').eq(window.z).val(window.product_quantity*window.product_price); 
     }); 
     window.z++; 
    }); 
}); 

Answer 1

私はこの記事で答えを発見した：Jquery multiply data in textbox arrayをし、dinamically追加フィールドの下

コードで動作するようにそれを適応：

<div id="container1"> 
<button class="btn btn-primary btn-md add_more_button" id="add_form_field">New Line &nbsp; <span>+ </span></button> 
    <div class="form-group col-xs-3"> 
     <label>Price</label> 
      <input type="number" class="form-control a" name="pret_piesa_inlocuita[]"> 
     <label>Qty</label> 
      <input type="number" class="form-control b" name="cantitate_piesa_inlocuita[]"> 
     <label>Piece Price</label> 
      <input type="number" class="form-control price" name="cost_piese[]" readonly> 
    </div> 
</div> 

ニューラインのjQuery：

$(add_button).click(function(e){ 

var wrapper = $("#container1"); 

     $(wrapper).append('<div class="form-group col-xs-3">\ 
     <label>Price</label>\ 
      <input type="number" class="form-control a" name="pret_piesa_inlocuita[]">\ 
     <label>Qty</label>\ 
      <input type="number" class="form-control b" name="cantitate_piesa_inlocuita[]">\ 
     <label>Piece Price</label>\ 
      <input type="number" class="form-control price" name="cost_piese[]" readonly>\ 
     </div>'); 
    } 
}); 

フィールド計算機能：

$(document).on('keyup', '.a,.b', function() { 
    var textValue1 = $(this).parent().find('.a').val(); 
    var textValue2 = $(this).parent().find('.b').val(); 
$(this).parent().find('.price').val(textValue1 * textValue2); 
    var sum = 0; 
$('.price').each(function() { 
    sum += +$(this).val(); 
    }); 
});