JQuery: Somando valores de vários inputs

Aprenda neste post, como somar valores.

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#somar").click(function(){
    var total = 0;
    var desconto = $("#desconto").val() != "" ? $("#desconto").val() : 0;
    $('.input').each(function(){
      var valor = Number($(this).val());
      if (!isNaN(valor)) total += valor;
    });
    total = total - desconto;
    $(".resultado").html(total.toFixed(2));
  });
});
</script>
</head>
<body>
<strong>HTML</strong>
<br />
<input type="text" value="100.20" class="input" />
<input type="text" value="200.20" class="input" />
<input type="text" value="300.20" class="input" />
<br><br>
Desconto:<br>
<input type="text" value="10.99" id="desconto" />
 
<input type="button" value="SOMAR" id="somar" />
<br /><br />
<strong>JQuery</strong>
<br />
Resultado: R$ <span class="resultado">0.00</span>
</body>
</html>

Veja o funcionamento desse script clicando aqui.

Qualquer dúvida, deixe nos comentários.

Até mais.

22 comentários em “JQuery: Somando valores de vários inputs

  • 1 de maio de 2014 em 0:31
    Permalink

    Boas, mas puxa valores do banco de dados?

    Resposta
    • 13 de maio de 2014 em 10:12
      Permalink

      Fala Arthur.

      Basta fazer uma conexão com o banco, trazer os dados em um loop e montar o html.

      segue exemplo:

      <?php
      $sql = "SELECT valor FROM TABELA";
      WHILE ($l = mysql_fetch_array($sql)){
      ?>
      <input type="text" value="<?php echo $l['valor']?>" class="input" />
      <?php
      }
      ?>
      <input type="button" value="SOMAR" id="somar" />
      Resposta
  • 19 de maio de 2014 em 20:41
    Permalink

    Olá boa noite, muito obrigado pelo código, gostaria de saber como faço para colocar esse resultado da soma dentro de uma input (Resultado: R$ 0.00)?

    Resposta
    • 22 de maio de 2014 em 11:59
      Permalink

      Olá Rodrigo.

      cria um uma tag do tipo input

      ex:

      <input id="resultado" value="">

      no javascript, atribua o resultado dessa forma

      $("#resultado").val("R$ "+total.toFixed(2));
      Resposta
  • 17 de novembro de 2014 em 11:13
    Permalink

    Ola, obrigado pelo script me foi muito útil pra mim. Poderia me dizer eu faço para subtrair os valores.

    Obrigado!

    Resposta
  • 21 de maio de 2015 em 16:57
    Permalink

    Valeu pela dica, isso ajuda muito naqueles dias que o cérebro da uma travada e sua lógica de programação vai para o espaço…rs

    Obrigado!!

    Resposta
  • 31 de março de 2016 em 11:56
    Permalink

    Parabéns pelo post, muito útil.

    Resposta
  • 9 de junho de 2016 em 14:34
    Permalink

    gostaria de saber como posso colocar um campo para desconto

    Resposta
    • 7 de setembro de 2016 em 18:46
      Permalink

      Olá Alysson.

      O código foi atualizado com a sua solicitação.

      Tiago

      Resposta
  • 9 de agosto de 2016 em 12:39
    Permalink

    ola será que me pode ajudar tenho varias tabelas geradas dinamicamente e em cada uma tenho um input, e quero que esse input faça soma com 0 por exemplo 5 + 0 = 5 e esse total não vá para tabela de baixo como me esta acontecer.
    acontece isto:
    5+0=5
    noutro campo:
    6+0=11
    neste campo faz a soma com o total de cima
    meu codigo js:

    var total = 0;
    function soma(i){

    $(‘#calculaTotal’+i).each(function(){

    var valor = document.getElementById(“preco”+i).value;

    total = parseInt(total) + parseInt(valor) ;
    $(“#total”+i).html(total);
    });

    $(“#preco”+i).val(“”);

    }

    Resposta
  • 6 de setembro de 2016 em 16:14
    Permalink

    Boa tarde,

    Tenho uma duvida,

    nesse codigo que você fez tem como por exemplo no input a pessoa coloca 22,22 com “virgula” ele não soma depois da “virgula” porém com ponto ele vai…
    Teria como mesmo a pessoa colocando virgula ele somasse ?

    Resposta
  • 23 de novembro de 2016 em 11:31
    Permalink

    Ótimo código, me ajudou bastante.
    Como faço para fazer autosoma sem clicar no botao somar?
    Abraços.

    Resposta
    • 8 de dezembro de 2016 em 14:50
      Permalink

      Fala chará,

      pra funcionar da forma como você quer, basta trocar a linha 9 por este código:

      $(".input, #desconto").keyup(function(){
      Resposta
  • 21 de janeiro de 2017 em 3:32
    Permalink

    Brother muito bom.

    Mas como faço para salvar os dados desse campo que teve o value “alterado” no db?

    Resposta
    • 23 de janeiro de 2017 em 16:06
      Permalink

      Fala Guaracy.

      Pra salvar em banco de dados você teria que fazer via $.ajax, enviando os dados via POST para um arquivo .php que conteria instruções MySQL.

      Espero ter ajudado.

      Resposta
  • 16 de janeiro de 2018 em 2:07
    Permalink

    Ola ! Td bem ?
    Meu usuario digita 10.265,98
    por exemplo no Brasil
    eles nao somam
    porque espera 10265.98
    o que posso fazer pra somar ?

    Resposta
  • 20 de fevereiro de 2018 em 10:09
    Permalink

    Bom Dia Tiago,
    Parabéns pelo código e pela atenção com os comentários.
    Pergunta de iniciante. Este código Jquery deve ficar no código php ou em arquivo específico?
    Porque apenas o código que você disponibilizou não roda, como roda no seu servidor.

    Resposta
    • 27 de fevereiro de 2018 em 9:22
      Permalink

      Fala Gilson.

      Pode ser em um arquivo index.html ou index.php.

      O seu problema pode ser na chamada do arquivo jquery.js que deve estar no mesmo diretório do index.html/php.

      Abraço

      Resposta
  • 27 de fevereiro de 2018 em 11:52
    Permalink

    Bom dia!
    Neste exemplo não faz soma de 10,20 + 1.500,50 etc
    Tem como fazer este tipo de soma ?

    Desde já agradeço,

    Gilberto

    Resposta
    • 27 de fevereiro de 2018 em 12:09
      Permalink

      Fala Gilberto.

      As somas não podem ser feitas usando o padrão brasileiro. Primeiro, você precisa formatar os valores no padrão americano, para depois somar.

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *