I am new to this, I am creating inputs dynamically in which I want to multiply numbers that I am entering and that the results are added in a separate input.
This is my input creation code:
<div class="inputs"></div>
<button type="button" id="agregar">AGREGAR</button><br><br>
Total:<input id="total" type="text" readonly>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$("#agregar").click(function(){
var cont = $(".numb").length;
var index = cont + 1;
var add = "<div><input class='numb' id='nn_"+index+"'> X <input id='mm_"+index+"'> = <input id='resultado_"+index+"' readonly></div>";
$(".inputs").append(add);
});
</script>
<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>
As shown, I want that when entering numbers in each nn and mm input these values are multiplied and the result is output in their respective input result and also as I am doing this the results of the multiplications are added and output in the input total
How can I achieve this?
I'd appreciate your help.
Taking advantage of the fact that you have the index defined for each
input
, a simple option would be to add a function in the eventonblur
of eachinput
call that calculates the multiplication and the total sum:Or you could do it with the onkeypress event. I'll leave that to your liking :)