JavaScript - Consulta: Suma de inputs dinamicos

   
Vista:

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.

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Consulta: Suma de inputs dinamicos

Publicado por xve (1595 intervenciones) el 12/07/2016 10:35:39
Hola Felipe, tu problema, es que una vez se carga el javascript, se queda únicamente con el DOM actual de la pagina, no con las nuevas inserciones de código HTML...

Para que esto no suceda, tienes que crear nuevamente la función!!!

Te he modificado tu código para que te funcione...
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
59
60
61
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
<script>
function define()
{
    $("#add").unbind().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);
        define();
    });
 
	$(".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);
	}
}
$(document).ready(function() {
	define();
});
</script>
 
<div class="row">
    <div class="col-md-12">
		<div class="form-group" id="buildyourform">
			<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>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Consulta: Suma de inputs dinamicos

Publicado por felipe (5 intervenciones) el 12/07/2016 16:01:20
Completamente agradecido, funciona perfectamente.

Saludos!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar