1

Saludos, tengo un problema al mostrar el total de una operacion que hago entre dos input, el resultado de esa operacion debo mostrarla en otro input automaticamente, sin pulsar un boton ni nada, estos son mis inputs:

$(document).ready(function() {

  $("#monto").change(function() {

    var acumulado = parseInt(0);

    function calcula() {
      var cantidad = parseInt($("#num").val());
      var monto = parseInt($("#monto").val());
      var vecesPorcentaje = Math.floor(cantidad / 3);
      var sobrantes = cantidad - (vecesPorcentaje * 3);

      for (var i = 0; i < vecesPorcentaje; i++) {
        acumulado = acumulado + (monto * 3);
        monto = monto + (monto * 0.2);
      }
      acumulado = acumulado + (monto * sobrantes);
      $("#total").val(acumulado);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST">
  <input type="text" id="num" placeholder="cantidad"><br><br>
  <input type="text" id="monto" placeholder="monto"><br><br>
  <input type="text" id="total" disabled value="">
</form>

Busco que me aparezca el total de la operacion automaticamente mientras vaya escribiendo en el input con id="monto" pero no me esta mostrando nada y no da errores en console.

1
  • Prueba en lugar del evento change usa el keypress.
    – user34391
    Commented el 13 ago. 2017 a las 20:41

1 respuesta 1

1

Utiliza el metodo keyup que se ejecuta siempre que el usuario escriba y no estas ejecutando la funcion calcula para realizar el calculo:

$(document).ready(function(){

 $("#monto").keyup(function(){

  var acumulado = parseInt(0);

   function calcula(){
     var cantidad = parseInt($("#num").val());
     var monto = parseInt($("#monto").val());
     var vecesPorcentaje = Math.floor(cantidad/3);
     var sobrantes = cantidad - (vecesPorcentaje*3);

       for(var i = 0; i< vecesPorcentaje; i++)
       {
            acumulado = acumulado + (monto*3);
            monto = monto + (monto*0.2);
       }
          acumulado = acumulado+(monto*sobrantes);
          $("#total").val(acumulado);
      }
      
      calcula();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST">
  <input type="text" id="num" placeholder="cantidad" ><br><br>
  <input type="text" id="monto" placeholder="monto"><br><br>
  <input type="text" id="total" disabled value="">
</form>

Te recomendaria que elimines la defincion de la funcion ya que por cada letra estarias creando una nueva función y en tu caso, tener una función o no para hacer el calculo, no hace ninguna diferencia.

Aqui el codigo sin la funcion:

    $(document).ready(function(){

     $("#monto").keyup(function(){

      var acumulado = parseInt(0);

         var cantidad = parseInt($("#num").val());
         var monto = parseInt($("#monto").val());
         var vecesPorcentaje = Math.floor(cantidad/3);
         var sobrantes = cantidad - (vecesPorcentaje*3);

           for(var i = 0; i< vecesPorcentaje; i++)
           {
                acumulado = acumulado + (monto*3);
                monto = monto + (monto*0.2);
           }
           acumulado = acumulado+(monto*sobrantes);
           $("#total").val(acumulado);
          
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form action="" method="POST">
      <input type="text" id="num" placeholder="cantidad" ><br><br>
      <input type="text" id="monto" placeholder="monto"><br><br>
      <input type="text" id="total" disabled value="">
    </form>

1
  • Gracias Einer solucionado. Thanks Very Much!
    – user55208
    Commented el 13 ago. 2017 a las 20:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.