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.
Boas, mas puxa valores do banco de dados?
Fala Arthur.
Basta fazer uma conexão com o banco, trazer os dados em um loop e montar o html.
segue exemplo:
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)?
Olá Rodrigo.
cria um uma tag do tipo input
ex:
<input id="resultado" value="">no javascript, atribua o resultado dessa forma
Ola, obrigado pelo script me foi muito útil pra mim. Poderia me dizer eu faço para subtrair os valores.
Obrigado!
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!!
Parabéns pelo post, muito útil.
gostaria de saber como posso colocar um campo para desconto
Olá Alysson.
O código foi atualizado com a sua solicitação.
Tiago
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(“”);
}
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 ?
Olá, Littiele Oliveira.
Sempre que for somar, os valores devem estar no formato americano, não pode conter vírgula.
Você até pode utilizar vírgula nos campos de entrada, porém antes de fazer a soma você deve formatar os valores.
Veja como formatar, neste link http://www.linhadecomando.com/javascript/javascript-formatar-valor-monetario.
Tiago
Ótimo código, me ajudou bastante.
Como faço para fazer autosoma sem clicar no botao somar?
Abraços.
Fala chará,
pra funcionar da forma como você quer, basta trocar a linha 9 por este código:
Brother muito bom.
Mas como faço para salvar os dados desse campo que teve o value “alterado” no db?
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.
E como ficaria com mais campos de descontos ?
só consegui pegar o valor do primeiro.
var desconto = $(“#desconto”).val();
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 ?
Olá Gladson. Tudo bem.
Você precisa formatar o valor antes de fazer a soma. Neste link http://www.linhadecomando.com/javascript/javascript-formatar-valor-monetario você encontra a função.
Para exibir o resultado de volta ao padrão brasileiro, usa-se uma outra função http://www.linhadecomando.com/javascript/javascript-exibir-valor-com-ponto-e-virgula.
Espero ter ajudado!
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.
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
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
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.