Calculate values within all inputs with class = 'quant'

0

I have a function that dynamically inserts inputs into a div making it possible to create a list of purchases, tasks, or what the imagination allows, it also has a button that removes the item that does not want more, like an ALL , I would like that when running the COUNT function it not only counts the inputs but also calculates how many numbers it has in all the inputs, for example, it has 4 inputs so it will calculate 4 inputs and also it will add the value inside all 4, I already know how to count, I just do not know how to add.

The code to put inputs 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 must be run within this function below

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 snippet 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 inside it

$ (document) .ready (function () {     var scnDiv = $ ('div.itens');     var rscnDiv = $ ('div.itens x'). size () + 1;     new_input ();

editing

The divs that hold the inputs and show how many inputs they have are the below

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

I wanted to be able to count the amount of input as it already does and also add the values inside all the inputs into a total quantity div next to the total items, that alone is enough, but enough to do function without ID only with class, valew, since now, grateful

    
asked by anonymous 07.04.2017 / 20:52

3 answers

1

You can do the accounts with jQuery itself.

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

You can also use the each method of jQuery to scroll through this list of items you just selected, and get the value you typed and add to the variable soma_inputs if it is a valid number and later use this value.

and to play this value added to another input you use .val() of 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><inputtype="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>
    
07.04.2017 / 20:58
1

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>
    
07.04.2017 / 21:22
0
var soma = 0;
$('.itens_total').each(function(el){
  soma+=$(el).val();
})
    
07.04.2017 / 20:59