Boa tarde !
Galera estou com um novo problema no formulario do fluig.
Preciso retornar um somatorio de um tablename, a cada vez que o usuario incluir um a nova linha no tablename um campo precisa ser somado com o novo valor.
Ex.: Tablename = "tb_produtos"
Campos:
- Nome Produto | Valor Produto
- Arroz | 5,00
- Frango | 20,00
- Pizza | 40,00
Total : 65,00
Coloquei o TableName, mas não sei como faço para Somar esses valores.
Se alguem puder me ajudar eu agradeço desde já !!!
@Daniel, você pode colocar isso na função de adição:
Segue abaixo o HTML:
<!-- Botão para adicionar uma nova linha no Pai x Filho -->
<div class="row">
<button type="button" class="btn btn-primary" name="btn_addProduto" id="btn_addProduto">Adicionar Produto</button>
</div>
<!-- Tabela Pai x Filho -->
<div class="row">
<table class="table" id="tbProdutos" tablename="tbProdutos" noaddbutton=true>
<thead>
<tr>
<th>Nome Produto</th>
<th>Valor Produto</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" name="txt_nomeProduto" id="txt_nomeProduto">
</td>
<td>
<div class="input-group">
<div class="input-group-addon">R$</div>
<input type="text" class="form-control text-right" name="txt_valorProduto" id="txt_valorProduto">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Campo com o valor Total dos Produtos -->
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<input type="text" class="form-control" name="txt_valorTotal" id="txt_valorTotal">
</div>
</div>
Segue abaixo Javascript:
// Clique do botão para adicionar linha do Pai x Filho
$("#btn_addProduto").on("click", function(e){
wdkAddChild('tbProdutos');
somaProdutos();
});
// Soma o valor de todos os produtos ao sair do campo do valor do produto
$("input[id^='txt_valorProduto___']").on("blur", function(){
somaProdutos();
});
// função para fazer a soma dos valores de todos os produtos
function somaProdutos() {
var soma = 0;
// percorre todos os campos Pai x Filho
$(document).on("blur", "input[id^='txt_valorProduto___']", function(e){
soma = soma + parseFloat($(this).val());
});
// alimenta o campo Total com a soma dos valores dos produtos
$("#txt_valorTotal").val(soma);
}
=========================================================================
FUNÇÃO CORRETA:
function somaProdutos() {
var soma = 0;
// dessa forma irá funcionar
$(document).on("blur", "input[id^='txt_valorProduto___']", function(e){
soma = soma + parseFloat($(this).val());
});
// alimenta o campo Total com a soma dos valores dos produtos
$("#txt_valorTotal").val(soma);
}
FUNÇÃO QUE NÃO IRÁ FUNCIONAR:
function somaProdutos() {
var soma = 0;
// dessa forma NÃO irá funcionar
// Como os campos são criados dinamicamente, dessa forma não irá funcionar
$("input[id^='textValor_']").each(function(index, value){
soma = soma + parseFloat($(this).val());
});
// alimenta o campo Total com a soma dos valores dos produtos
$("#txt_valorTotal").val(soma);
}
Onde fica a programação do botão ???
Adicionei um exemplo na minha resposta.
Obrigado pela ajuda, seu exemplo funcionou ate a metade, o botão de adcionar funcionou perfeitamente, mas a soma não funciona, ele não entra na função pelo onBlur de jeito nenhum !
Alterei a função somaProdutos(), verifique se vai agora
@Daniel, deu certo agora?
Ainda não, não esta entrando no evento do onBlur, a função funciona perfeitamente, mas o evento não, nem entra no evento.
Mesmo depois da alteração que solicitei na função somaProdutos()?
a função funciona, o que não funciona é o evento onblur que chama a função !
Coloca aqui sua função somaProdutos
function somaProdutos() {
var soma = 0;
$(“input[id^=‘textValor___’]”).each(function(index, value){
soma = soma + parseFloat($(this).val());
alert(soma)
});
// alimenta o campo Total com a soma dos valores dos produtos
$("#txt_valorTotal").val(soma);
}
Você não atualizou a função com a alteração que realizei.
No lugar de $("input[id^='textValor_']").each(function(index, value){
você coloca $(document).on("blur", "input[id^='txt_valorProduto___']", function(e){
mas a função funciona, o que não funciona é o evento $(“input[id^=‘textValor___’]”).blur(function(){
São comandos diferentes feitos em JQuery, teste dessa outra forma que te passei.
Testei aqui e funcionou
Da forma como eu passei primeiramente não irá funcionar pq esse campo é criado dinamicamente. Da outra forma que passei, vai funcionar pq é específico pra pegar os campos criados dinamicamente.
Depois da alteração que fiz, conseguiu testar?
@Daniel, conseguiu resolver seu problema?
Eu tive q fazer de outra forma.
chamei a função somaProdutos diretamente do evento do campo onBlur.
@Gabriel tem alguma forma de realizar essa soma de valores em campos de uma tabela pai e filho que tem máscara de valor (“#00.000.000.000.000,00”)?