JavaScript - Problema con función de calculo de inputs dinamicos

   
Vista:

Problema con función de calculo de inputs dinamicos

Publicado por felipe (5 intervenciones) el 18/07/2016 17:20:40
Hola a todos,

Les cuento, me encuentro realizando un formulario de cotizacion donde agrego inputs dinamicamente, y ademas me va imprimiendo en pantalla el calculo de los valores ingresados en cada inputs, hasta ahi todo bien, pero si elimino un input, el valor queda sumado, y no se resta a la totalidad.
Adjunto codigo.

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<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\" id=\"val0\" name=\"data[Product]["+ intId +"][nombre]\" class=\"form-control\" placeholder=\"Detalle del producto\" style=\"width:30%;\" />");
        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 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(removeButton);
        $("#buildyourform").append(fieldWrapper);
        define();
    });
 
  $(".products input").keyup(multInputs);
 
  function multInputs() {
    var neto = 0;
    var iva = 0;
    var total = 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);
      neto += $total;
      iva = neto * 0.19;
      total = neto + iva;
    });
 
    var neto = neto;
    if(!isNaN(neto)){
        neto = neto.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1.');
        neto = neto.split('').reverse().join('').replace(/^[\.]/,'');
        $(".neto").text(neto);
    }
 
    if(!isNaN(iva)){
        iva = iva.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1.');
        iva = iva.split('').reverse().join('').replace(/^[\.]/,'');
        $(".iva").text(iva);
    }
 
    if(!isNaN(neto)){
        total = total.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1.');
        total = total.split('').reverse().join('').replace(/^[\.]/,'');
        $(".total").text(total);
    }
 
  }
 
}
$(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>
 
<table class="table table-hover table-striped">
                                    <tbody>
                                        <tr>
                                            <td>NETO</td>
                                            <td><strong>$ </strong><span class="neto"></span></td>
                                        </tr>
                                        <tr>
                                            <td>IVA</td>
                                            <td><strong>$ </strong><span class="iva"></span></td>
                                        </tr>
                                        <tr>
                                            <td>TOTAL</td>
                                            <td><strong>$ </strong><span class="total"></span></td>
                                        </tr>
                                    </tbody>
                                </table>

Agradeceria cualquier ayuda.

Saludos.
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

Problema con función de calculo de inputs dinamicos

Publicado por xve (1595 intervenciones) el 18/07/2016 18:56:30
Hola Felipe, simplemente tienes que ejecutar la función del calculo cada vez que eliminas una fila...

Añade lo que esta en negrita...
1
2
3
4
removeButton.click(function() {
    $(this).parent().remove();
    multInputs();
});
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

Problema con función de calculo de inputs dinamicos

Publicado por felipe (5 intervenciones) el 18/07/2016 19:06:32
Hola, Muchisimas gracias por tu ayuda, me sirvio mucho.
aprobechando tu tiempo, como puedo hacer para ejecutar esa funcion desde el arranque de la pagina, dado que estoy creando una funcion edit, la cual me mostrar inputs ya completados, pero para que la funcion me realize el calculo, tengo que realizar alguna modificacion en algun input.
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