Jquery How to add input values in real time?

Question

I’m a beginner and I have a system where the user can add several inputs dynamically, precise that when typing the values (in decimals) the total sum is displayed in a div. If anyone can help me I’d be so grateful.

Answer 1

You can use jQuery’s keyup() function, to perform an action whenever any number is inserted in an input.

Documentation of the keyup: https://api.jquery.com/keyup/.

$(".NomeClasseInputs").keyup(function(){
    var soma = 0;
    $(this).each(function() {
        soma += parseFloat($(this).val());
    });
})

keyup() will be executed whenever there is any action within any input, and the function inside is going through each input and performing the sum of the values.

Remembering that for this to work all inputs must have the same class. The sum will be stored in the sum variable, which you can insert into any div with the . html():

$('.idDiv').html(soma);