0

Possuo uma função que insere inputs de forma dinâmica em uma div possibilitando a criação de uma lista de compras, tarefas, ou o que a imaginação permitir, este também possui um botão que remove o item que não deseja mais, tipo um TODO, eu gostaria que ao rodar a função CONTAR ele não só conte os inputs mas também calcule quantos números tem em todos os inputs, exemplo, tem 4 inputs então ele calculará 4 inputs e também somará o valor dentro de todos os 4, eu já sei como contar, só não sei como somar.

O código de colocar inputs é este

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'); } });

Para que tudo funcione perfeitamente, o new_input tem que ser executado dentro desta função abaxo

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

a função que conta os inputs é este trecho abaixo

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; }

a função que remove um item da lista é o trecho a baixo

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

edição

Para que tudo funcione, precisa estar dentro disso

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

edição

as divs que seguram os inputs e mostram quantos inputs têm são as abaixo

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

Eu queria poder contar a quantidade de input como já faz e também somar os valores dentro de todos os inputs em uma div de quantidade total ao lado da itens total, só isso já é o suficiente, mas se de quebra der para fazer funcionar sem ID só com classe, valew, desde já, grato

3 Respostas 3

1

Você pode fazer as contas com o proprio jQuery.

Quando você usa $('.itens_total') você estará pagando todos itens que possuem a classe .itens_total ou seja, todos seus inputs de acordo com seu código. A propriedade .length vai te dar esse número de itens, ai você já tem a quantidade.

Você pode utilizar também o método each do jQuery para percorrer essa sua lista de items que você acabou de selecionar, e obter o valor que está digitado e somar à variavel soma_inputs caso o mesmo seja um número válido e posteriormente usar esse valor.

e para jogar esse valor somado para um outro input você utiliza o .val() do jQuery com a sua variavel da soma.

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>

6
  • para enviar para um input no caso eu coloco?
    – flourigh
    Commented 7/04/2017 às 19:03
  • adicionei à resposta...
    – andrepaulo
    Commented 7/04/2017 às 19:07
  • é, no caso, ele não está somando sozinho e nem contando quantos inputs tem, teria que contar a quantidade de input e somar os valores digitados dentro, contar já está fazendo no meu exemplo, só precisa somar sozinho cada vez que alterar o valor da quantidade, ele já está fazendo isso? no caso eu teria que colocar no meu código para aparecer?
    – flourigh
    Commented 7/04/2017 às 21:04
  • sim... coloquei esse codigo como um exemplo pra voce ver como funciona, nao pra deixar funcionando pra voce, entende? é voce pegar a ideia que te passei e colocar no seu codigo.
    – andrepaulo
    Commented 7/04/2017 às 21:08
  • caramba, perfeito, funcionou muito bem, pus dentro do Contar mais e do contar menos, então ele conta os inputs e soma os valores ao criar e ao remover, muito grato, entendi então como funciona, não me leve a mal, não é que queria que fizesse para mim, é que não sabia mesmo, sou novato em jquery
    – flourigh
    Commented 8/04/2017 às 9:29
1

Se for apenas para iterar, somar e exibir, tens a seguinte opção:

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>

1
  • é, o problema é que não está mudando automaticamente, teria que fazer duas coisas, contar o input, no seu exemplo, 4 e também somar os valores que forem digitados dentro de cada input, ou seja, só tem 1 input vazio, então aparece 1 no .contar e 0 no .somar e ao digitar qualquer valor no .quant ele repetir no .somar, quando aparecer outro input ou seja, agora tem 2 então ele irá contar 2 no .contar que então aparecerá 2 e no .somar, irá somar os 2 valores dentro dos 2 inputs
    – flourigh
    Commented 7/04/2017 às 21:03
0
var soma = 0;
$('.itens_total').each(function(el){
  soma+=$(el).val();
})
1
  • para enviar para um input no caso, eu coloco?
    – flourigh
    Commented 7/04/2017 às 19:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .