Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Iniciar función al cargar página

19 de julio de 2016

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

#1

Solucionado,

para que un script arranque desde el inicio de la web

$( document ).ready(function() { // NUESTRA FUNCION });

Saludos.

@BalcazarSala

20 julio 2016, 16:56
#2

ejejeje me asombra que hayas podido escribir el código y no puedas inicializar la función al momento de cargar la pagina.

@alennrh

22 julio 2016, 5:46