Tengo una script que me permite agregar campos dinamicamente, y a su vez me muestra el resultado de estos.
Código:
Hasta aquí todo bien, el problema se me presenta al traer los datos ingresados desde la base de datos para poder editarlos. <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" /> </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>
Tengo los siguientes problemas:
1.- No me arroja los cálculos, hasta que realizo alguna modificación
2.- Al agregar una nueva fila, me genera el calculo, pero al eliminar la linea, se sigue manteniendo los valores en el total.
Agradecería cualquier ayuda.
Saludos.