Multiplicar valores de input creados dinámicamente – JQuery

publicado por: Anonymous

Soy nuevo en esto, estoy creando inputs dinámicamente en los cuales quiero multiplicar números que voy ingresando y que los resultados se vayan sumando en un input aparte.

Este es mi código de creación de inputs:

_x000D_

_x000D_

<div class="inputs"></div>_x000D_
<button type="button" id="agregar">AGREGAR</button><br><br>_x000D_
Total:<input id="total" type="text" readonly>_x000D_
 <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>_x000D_
 <script>_x000D_
  $("#agregar").click(function(){_x000D_
   var cont = $(".numb").length;_x000D_
   var index = cont + 1;_x000D_
   var add = "<div><input class='numb' id='nn_"+index+"'> X <input id='mm_"+index+"'> = <input id='resultado_"+index+"' readonly></div>";_x000D_
   $(".inputs").append(add);_x000D_
  });_x000D_
 </script>

_x000D_

_x000D_

_x000D_

 <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 <script>
   var cont = $(".numb").length;
   var index = cont + 1;
   var add = "<div><input id='nn_"+index+"'> X <input id='mm_"+index+"'> = <input id='resultado_"+index+"' readonly></div>";
   $(".inputs").append(add);
 </script>
</body>
</html>

Como se muestra, quiero que al ingresar números en cada nn y mm input estos valores se multipliquen y salga el resultado en su respectivo input resultado y que además a medida que esté haciendo esto los resultados de las multiplicaciones se sumen y salga en el input total

Cómo puedo lograr esto?

Agradecería su ayuda.

solución

Aprovechando que tienes el índice definido para cada input, una opción sencilla sería añadir en el evento onblur de cada input una llamada a una función que te calcule la multiplicación y la suma total:

_x000D_

_x000D_

<div class="inputs"></div>_x000D_
<button type="button" id="agregar">AGREGAR</button><br><br>_x000D_
Total:<input id="total" type="text" readonly>_x000D_
_x000D_
 <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>_x000D_
 <script>_x000D_
  $("#agregar").click(function(){_x000D_
   var cont = $(".numb").length;_x000D_
   var index = cont + 1;_x000D_
   var add = "<div><input class='numb' id='nn_"+index+"' onblur='calcularMult(" + index + ")'> X <input id='mm_"+index+"' onblur='calcularMult(" + index + ")'> = <input id='resultado_"+index+"' readonly></div>";_x000D_
   $(".inputs").append(add);_x000D_
  });_x000D_
  _x000D_
  function calcularMult(idx){_x000D_
  $("#resultado_" + idx).val($("#nn_" + idx).val() * $("#mm_" + idx).val());_x000D_
  var sum = 0;_x000D_
  $("input[id^='resultado_']").each(function() {_x000D_
    sum += Number($(this).val());_x000D_
   });         _x000D_
    $("#total").val(sum);_x000D_
  }_x000D_
 </script>

_x000D_

_x000D_

_x000D_

O podrías hacerlo con el evento onkeypress. Eso ya lo dejo a tu gusto 🙂

_x000D_

_x000D_

<div class="inputs"></div>_x000D_
<button type="button" id="agregar">AGREGAR</button><br><br>_x000D_
Total:<input id="total" type="text" readonly>_x000D_
_x000D_
 <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>_x000D_
 <script>_x000D_
  $("#agregar").click(function(){_x000D_
   var cont = $(".numb").length;_x000D_
   var index = cont + 1;_x000D_
   var add = "<div><input class='numb' id='nn_"+index+"' onkeyup='calcularMult(" + index + ")'> X <input id='mm_"+index+"' onkeyup='calcularMult(" + index + ")'> = <input id='resultado_"+index+"' readonly></div>";_x000D_
   $(".inputs").append(add);_x000D_
  });_x000D_
  _x000D_
  function calcularMult(idx){_x000D_
  $("#resultado_" + idx).val($("#nn_" + idx).val() * $("#mm_" + idx).val());_x000D_
  var sum = 0;_x000D_
  $("input[id^='resultado_']").each(function() {_x000D_
    sum += Number($(this).val());_x000D_
   });           _x000D_
    $("#total").val(sum);_x000D_
  }_x000D_
 </script>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *