Hola a todos, les cuento, me encuentro trabajando en una formulario de cotización, el cual me permite calcular la totalidad de los artículos ingresados (dinámicamente), a partir de la cantidad y el valor unitario. Hasta aquí todo bien, el problema que tengo, es que deseo poder editar datos ingresados a partir de este formulario, pero cuando traigo los datos desde la base de datos, no puedo generar el cálculo de los artículos automáticamente, por lo que necesito que la función que genera este cálculo se inicie al momento de cargar la página.
Adjunto 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>
Respuestas
Solucionado,
para que un script arranque desde el inicio de la web
$( document ).ready(function() { // NUESTRA FUNCION });
Saludos.
@BalcazarSala
ejejeje me asombra que hayas podido escribir el código y no puedas inicializar la función al momento de cargar la pagina.
@alennrh