添加不同textField的两个值以在多行上填充另一个textField

Question

每当我输入每行的数量和单位成本的值时，我想自动将相乘的结果显示在“总成本”字段中。

我在下面编写了jquery脚本，试图找出解决方法，但是无法正常工作

$('.unit, .quantity').on('change', function() {
           // var quantity = $('#expenseslist-quantity').val();
           // var unit = $('#expenseslist-unit_cost').val();
           var total = 0;
            $('.quantity, .unit').each(function(){
                total = quantity * unit ;
            });
            $('#expenseslist-total_cost').val(total);
        });

请帮助。

Answer 1

更新后的答案：

根据您最近的信息，我对代码进行了必要的更改。

PS：为此，您还必须在HTML上进行一些更改，并在其上插入data-属性。

对于单位输入：data-type="unit" data-field="field_{1}"

对于数量输入：data-type="qty" data-field="field_{1}"

对于输出输入区域：data-field-count="field_{1}"

之后，请尝试以下代码：

$('.unit, .quantity').on('keyup', function() {
let fieldType = $(this).data('type'),
        fieldCount = $(this).data('field'),
        intOne = $(this).val(),
        intTwo = 1

    if (fieldType == 'qty') {
        intTwo = $('input[data-type=qty]').val()
    } else {
        intTwo = $('input[data-type=unit]').val()
    }

    let total = intOne * intTwo

    $('input[data-field-count='+ fieldCount +']').val(total);
});

旧答案：

由于您的查询含糊不清，因此据我所知：

$('.unit, .quantity').on('keyup', function() {
    let qty = $('#expenseslist-quantity').val(),
        unit = $('#expenseslist-unit_cost').val()

    let total = unit * qty

    $('#expenseslist-total_cost').val(total);
});

我不知道您为什么使用each循环。 unit 和 quantity 字段是否超过一个？

Answer 2

  

尝试学习如何实现动态元素

$('.unit, .quantity').on('change', function(event) {
 var total1 = 0;
             var total2 = 0;
            var quantity1 = $('#expenseslist-quantity1').val();
            var unit1 = $('#expenseslist-unit_cost1').val();
            
         	  total1 = quantity1 * unit1 ;
           
            
         $('#expenseslist-total_cost1').val(total1);
            var quantity2 = $('#expenseslist-quantity2').val();
            var unit2 = $('#expenseslist-unit_cost2').val();
            total2 = quantity2 * unit2 ;
         $('#expenseslist-total_cost2').val(total2);
         
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
	<tr class="primary">
		<td width="170">
			<div class="form-group field-expenseslist-item_id">


				<select id="expenseslist-item_id" class="form-control" name="ExpensesList[item_id][]" required="">
					<option value="">Select an Item</option>
					<option value="1">Vehicle General Repairs And Maintenance</option>
					<option value="2">Transportation Cost</option>
				</select>

				<div class="help-block"></div>

			</div> 
		</td>       	

		<td width="450"><div class="form-group field-expenseslist-request_explanation">


			<textarea id="expenseslist-request_explanation" class="form-control" name="ExpensesList[request_explanation][]" rows="2" required=""></textarea>

			<div class="help-block"></div>

		</div>						
	</td>
	<td width="80"><div class="form-group field-expenseslist-quantity">


		<input type="number" id="expenseslist-quantity1" class="form-control quantity" name="ExpensesList[quantity][]" value="0" required="">

		<div class="help-block"></div>

	</div> 
</td>
<td width="130"><div class="form-group field-expenseslist-unit_cost">


	<input type="number" id="expenseslist-unit_cost1" class="form-control unit" name="ExpensesList[unit_cost][]" value="0" required="">

	<div class="help-block"></div>

</div> 
</td>
<td width="150"><div class="form-group field-expenseslist-total_cost">


	<input type="text" id="expenseslist-total_cost1" class="form-control total" name="ExpensesList[total_cost][]" value="0" readonly="readonly" required="">

	<div class="help-block"></div>

</div> 						
</td>
<!-- 	<td>
<button>Add</button>
</td> -->
</tr>
<tr class="primary">
	<td width="170">
		<div class="form-group field-expenseslist-item_id">


			<select id="expenseslist-item_id" class="form-control" name="ExpensesList[item_id][]" required="">
				<option value="">Select an Item</option>
				<option value="1">Vehicle General Repairs And Maintenance</option>
				<option value="2">Transportation Cost</option>
			</select>

			<div class="help-block"></div>

		</div> 
	</td>       	

	<td width="450"><div class="form-group field-expenseslist-request_explanation">


		<textarea id="expenseslist-request_explanation" class="form-control" name="ExpensesList[request_explanation][]" rows="2" required=""></textarea>

		<div class="help-block"></div>

	</div>						
</td>
<td width="80"><div class="form-group field-expenseslist-quantity">


	<input type="number" id="expenseslist-quantity2" class="form-control quantity" name="ExpensesList[quantity][]" value="0" required="">

	<div class="help-block"></div>

</div> 
</td>
<td width="130"><div class="form-group field-expenseslist-unit_cost">


	<input type="number" id="expenseslist-unit_cost2" class="form-control unit" name="ExpensesList[unit_cost][]" value="0" required="">

	<div class="help-block"></div>

</div> 
</td>
<td width="150"><div class="form-group field-expenseslist-total_cost">


	<input type="text" id="expenseslist-total_cost2" class="form-control total" name="ExpensesList[total_cost][]" value="0" readonly="readonly" required="">

	<div class="help-block"></div>

</div> 						
</td>
<!-- 	<td>
<button>Add</button>
</td> -->
<td><div class="btn btn-sm btn-danger rmv">Delete</div></td></tr></tbody>