Problem when showing data in input dynamically

Question

Problem when showing data in input dynamically

Navigation

#1 by (1 votes)

1

Greetings, I have a problem showing the total of an operation that I do between two inputs, the result of that operation I must show it in another input automatically, without pressing a button or anything, these are my 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>

I am looking for the total of the operation to appear automatically as long as I am writing in the input with id="amount" but it is not showing me anything and it does not give errors in console.

javascript

asked by Ivan Botero 13.08.2017 в 22:34

source

1 answer

Datagridview shows the length of the name instead of the name Doubt about Fibonacci

score 1 · Accepted Answer

Use the keyup method that is executed whenever the user types and you are not executing the calcula function to perform the calculation:

$(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>

I would recommend that you eliminate the definition of the function since for each letter you would be creating a new function and in your case, having a function or not to do the calculation, does not make any difference.

Here the code without the function:

    $(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>