Hola a todos,
Tengo una script que me permite agregar campos dinamicamente, y a su vez me muestra el resultado de estos.
Código:
<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>
Hasta aquí todo bien, el problema se me presenta al traer los datos ingresados desde la base de datos para poder editarlos.
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.