Calculate values within all inputs with class='Quant'

Question

I have a function that inserts inputs dynamically in a div enabling the creation of a shopping list, tasks, or what the imagination allows, this also has a button that removes the item you no longer want, type a TODO, I would like that when running the COUNT function it not only counts the inputs but also calculates how many numbers there are in all inputs, example, has 4 inputs so it will calculate 4 inputs and also sum the value within all 4, I already know how to count, I just don’t know how to add.

The input input code is this

function new_input() {
    $('<x>'
        + '<input class="cod" placeholder="Código" />'
        + '<input class="desc" placeholder="Descrição" />'
        + '<input class="quant" placeholder="Quantidade" />'
        + '<input class="val" placeholder="Valor" />'
/* este span serve para apagar um item */
        + '<span class="remove cursor_pointer display_none">+</span>'
    + '</x>').prependTo(scnDiv);
    $('input').first().focus();
    rscnDiv++;
/* este trecho abaixo irá contar um novo input */
    contar_mais('itens_total'); } });

For everything to work perfectly, new_input has to be executed inside this function:

function prep_new_input() {
    $(this).blur();
    event.preventDefault();
    $('input').first().focus();
    new_input(); }

the function that counts the inputs is this section below

function contar(i) {
    return document.getElementById(i); }
function contar_menos(i) {
    var quantidade = parseInt(contar(i).value);
    if(quantidade > 0)
    contar(i).value = quantidade - 1; } 
function contar_mais(i) {
    contar(i).value = parseInt(contar(i).value) + 1; }

the function that removes an item from the list is the excerpt below

$('span.remove').live('click', function() {
    if(rscnDiv > 1) {
        $(this).parents('x').remove();
        $('input').first().focus();
        rscnDiv--;
        contar_menos('itens_total'); } });

editing

For everything to work, you need to be in it

$(Document). ready(Function() { var scnDiv = $('div.items'); var rscnDiv = $('div.items x'). size() + 1; new_input();

editing

Divs that handle inputs and show how many inputs they have are as below

<div class='itens'></div>
<input id='itens_total' class='itens_total' value='0' readonly='readonly' />

I wish I could count the amount of input as it already does and also add the values within all inputs in a total quantity div next to the total items, only this is enough, but if break can make it work without only ID with class, Valew, already, grateful

Answer 1

You can do the math with jQuery itself.

When you use $('.itens_total') you will be paying for all items that possess the class .itens_total That is, all your inputs according to your code. The estate .length will give you this number of items, then you already have the amount.

You can also use the method each from jQuery to go through that list of items you just selected, and get the value that is typed and add to the variable soma_inputs if it is a valid number and subsequently uses that value.

and to play this value added to another input you use the .val() jQuery with its sum variable.

var qtde_inputs = $('.quant').length;
var soma_inputs = 0;

$('.quant').each(function(i,item){
  var valorItem = parseFloat($(item).val());

  if(!isNaN(valorItem))
    soma_inputs += parseFloat($(item).val());
});

$('#seu_campo_destino_da_soma').val(soma_inputs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
  <input type="text" class="quant" value="10">
  <input type="text" class="quant" value="10">
  <input type="text" class="quant" value="20">
  
  
  <input type="text" id="seu_campo_destino_da_soma">
<form>

Answer 2

If it’s just to iterate, add and display, you have the following option:

var itens = document.querySelectorAll(".quant");
var total = 0;

[].forEach.call(itens, function(item) {
  total += parseInt(item.value);

});

document.getElementById("total").innerHTML = total;

<input class="quant" type="text" value="1">
<input class="quant" type="text" value="1">
<input class="quant" type="text" value="1">
<input class="quant" type="text" value="1">

<div id="total"></div>

Answer 3

var soma = 0;
$('.itens_total').each(function(el){
  soma+=$(el).val();
})