如何从多个具有相同名称的输入中获取值,使用jQuery动态输入字段? [英] how to get value from multiple inputs with same name, Input Fields Dynamically with jQuery?
本文介绍了如何从多个具有相同名称的输入中获取值,使用jQuery动态输入字段?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想动态地单击按钮,将金额,数量,小计字段添加为发票项目.
I want to add amount, quantity, subtotal fields as invoice item dynamically clicking on a button.
但是问题是,当我想获取每次计算的 quantity
和 amount
输入字段值时,我无法使用jquery来获取该值,因为相同的ID名称.
But the problem is when I want to get the value of quantity
and amount
input field value to calculate each time, I can't fetch the value using jquery because of same id name.
如何获取动态字段值以计算小计.
How can I get the dynamic field value to calculate subtotal.
这是代码.
@extends('layout.master')
@section('css')
@endsection
@section('content')
<div id="saveInvoice">
<table id="dynamicAddRemove">
<tr>
<th class="wd-15p fontColor">Invoice Entry</th>
<th class="wd-15p fontColor">Quantity</th>
<th class="wd-15p fontColor">Amount</th>
<th class="wd-15p fontColor">Subtotal</th>
<th class="wd-10p fontColor"></th>
</tr>
<tr>
<td class="td"><input type="text" name="entry[]" placeholder="Enter entry" class="form-control" /></td>
<td class="td"><input type="text" name="quantity[]" placeholder="Enter quantity" class="form-control quantity" id="quantity"/></td>
<td class="td"><input type="text" name="amount[]" placeholder="Enter amount" class="form-control amount" id="amount" /></td>
<td class="td"><input type="text" name="subtotal[]" placeholder="Subtotal" class="form-control subtotal"id="subtotal" value="0.00" readonly/></td>
<td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success">Add More</button></td>
</tr>
</table>
<br>
<input type="hidden" name="patientId" id="patientId">
<input type="submit" id="submit" value="Save Invoice" class="btn btn-dark">
</div>
{!! Form::close() !!}
</div>
</div>
</div>
</div>
<br>
</div>
@endsection
@section('js')
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</script>
<script type="text/javascript">
$(document).ready(function () {
var i = 0;
$("#add-btn").click(function(){
++i;
$("#dynamicAddRemove").append('<tr><td class="td"><input type="text" name="entry['+i+']" placeholder="Enter entry" class="form-control"/></td><td class="td"><input type="text" name="quantity['+i+']" placeholder="Enter quantity" class="form-control quantity" id="quantity" /></td><td class="td"><input type="text" name="amount['+i+']" placeholder="Enter amount" class="form-control amount" id="amount"/></td><td class="td"><input type="text" name="subtotal['+i+']" placeholder="Subtotal" class="form-control subtotal" value="0.0" id="subtotal" readonly/></td><td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-danger remove-tr">Remove</button></td></tr>');
});
$(document).on('click', '.remove-tr', function(){
$(this).parents('tr').remove();
});
});
</script>
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#amount').on('keyup',function(){
var amount = $(this).val();
console.log(amount);
var quantity = $('#quantity').val();
var subtotal=amount*quantity;
$('#subtotal').val(subtotal);
});
$('#quantity').on('keyup',function(){
var quantity =$(this).val();
console.log(amount);
var amount = $('#amount').val();
var subtotal=amount*quantity;
$('#subtotal').val(subtotal);
});
});
</script>
@endsection
推荐答案
您可以使用此方法来获取数量数组值,例如:
you can use this approach to get the quantity arrays values like:
var quantityArray = $("input[name='quantity[]']")
.map(function(){return $(this).val();}).get();
并计算总和:
var quantity = quantityArray.reduce(function(a, b) {
return parseInt(a, 10) + parseInt(b, 10);
});
这篇关于如何从多个具有相同名称的输入中获取值,使用jQuery动态输入字段?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文