Consulta: Suma de inputs dinamicos
Publicado por felipe (5 intervenciones) el 11/07/2016 23:00:59
Hola a todos,
Les cuento, me encuentro realizando un formulario de compras, y necesito calcular el valor de cada producto de acuerdo a la cantidad y el valor unitario. Para esto me encuentro ingresando inputs dinamicamente, a medida de que los vaya necesitando, y mediante la funcion keyup calculando el total entre ambos inputs, pero lamentablemente solo me calcula la primera corrida de inputs, pero no los que ingreso dinamicamente con la funcion, alguna idea de que me encuentro haciendo mal.
Les cuento, me encuentro realizando un formulario de compras, y necesito calcular el valor de cada producto de acuerdo a la cantidad y el valor unitario. Para esto me encuentro ingresando inputs dinamicamente, a medida de que los vaya necesitando, y mediante la funcion keyup calculando el total entre ambos inputs, pero lamentablemente solo me calcula la primera corrida de inputs, pero no los que ingreso dinamicamente con la funcion, alguna idea de que me encuentro haciendo mal.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script>
$(document).ready(function() {
$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
var fieldWrapper = $("<div class=\"products\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" name=\"data[Product]["+ intId +"][nombre]\" class=\"form-control\" placeholder=\"Detalle del producto\" style=\"width:20%;\" />");
var fType = $("<input type=\"text\" id=\"val1\" name=\"data[Product]["+ intId +"][cantidad]\" class=\"form-control\" placeholder=\"Cantidad\" style=\"width:20%;\" />");
var fType2 = $("<input type=\"text\" id=\"val2\" name=\"data[Product]["+ intId +"][precio]\" class=\"form-control\" placeholder=\"Valor\" style=\"width:20%;\" />");
var fType3 = $("<span class=\"total\" style=\"width:10%;\">0</span>");
var removeButton = $("<input type=\"button\" class=\"btn btn-danger btn-fill\" style=\"width:15%;\" value=\"Eliminar\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(fType);
fieldWrapper.append(fType2);
fieldWrapper.append(fType3);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".products input").keyup(multInputs);
function multInputs() {
var mult = 0; // for each row:
$(".products").each(function () {
// get the values from this row:
var $val1 = $('#val1', this).val();
var $val2 = $('#val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.total',this).text($total);
mult += $total;
});
$("#grandTotal").text(mult);
}});
</script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="products">
<input type="text" name="data[Product][0][nombre]" class="form-control" placeholder="Detalle del producto" style="width:30%;" />
<input type="text" id="val1" name="data[Product][0][cantidad]" class="form-control" placeholder="Cantidad" style="width:20%;" />
<input type="text" id="val2" name="data[Product][0][precio]" class="form-control" placeholder="Valor" style="width:20%;" />
<input type="button" value="Agregar" class="btn btn-info btn-fill" id="add" />
<span class="total">0</span>
</div>
</div></div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Valora esta pregunta
0
