1

Olá, estou com um problema, no código abaixo possuo uma tabela de produtos, onde os mesmos possuem um valor(R$) e um input para o cliente escolher uma quantidade. Preciso que quando o cliente altere a quantidade, a mesma seja multiplicada pelo valor do produto e seja mostrada no campo valor total (elemento no footer da página).

Está função já esta funcionando, porém, só para o primeiro item da lista de produtos, ou seja, a partir do momento que altero a quantidade do primeiro item, ela é multiplicada pelo valor e o campo valor total é atualizado, mas quando a quantidade do próximo é definida o campo valor total não é atualizado.

Não sei o que está errado, caso alguém puder ajudar, agradeço muito, segue código: Para economizar página, deixei de fora o cabeçalho onde faço referência aos arquivos JS e outros documentos.

Tabela: Produto Valor Quantidade

                <tr id="produto">
                    <td><?=$produto['nomeProduto'] ?></td>
                    <td><div id="valor"><?=$produto['valorProduto']?></div></td>
                    <td>
                        <input id="quantidade" type="number" size="1" maxlength="2" max="10" min="0" step="0">
                    </td>
                </tr>

                <?php
                     endforeach;
                ?>
            </table>                
    <footer>
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <label> Total: </label>
            <div id="total" class="navbar-right">
              R$ 0,00
            </div>
        </nav>
    </footer>

Funções:

    function dinheiroTextoParaFloat(text) {  //"Transofram" em float.
    var limpaTexto = text.replace("R$", "").replace(",", ".");
    return parseFloat(limpaTexto);
}

function floatParaDinheiroTexto(value) { //"Transforma" em texto.
    var text = (value < 1 ? "0" : "") + Math.floor(value * 100);
    text = "R$ " + text;
    return text.substr(0, text.length - 2) + "," + text.substr(-2);
}

function leTotal() {                      
    var total = $("#total").text();      //Le o texto do elemento com ID total.
    return dinheiroTextoParaFloat(total); //Retorna o texto convertido em float. 
}

function escreveTotal(value) {
    var text = floatParaDinheiroTexto(value); //Armazena na variavel text o valor convertido em texto.
    $("#total").text(text); //escreve o total no elemento com id total.
}   

function calculaTotalProdutos(){
    var produtos = $("#produto");
    var totalProdutos = 0;

    for (var cont = 0; cont < produtos.length; cont++){
        var $produto = $(produtos[cont]);
        var quantidade = dinheiroTextoParaFloat(
            $produto.find("#quantidade").val());
        var valor = dinheiroTextoParaFloat(
            $produto.find("#valor").text());
        var subtotal = quantidade * valor;
        totalProdutos += subtotal;
    } 

    return totalProdutos;
}

$(document).ready(function() {
    $("#quantidade").change(function() {
        escreveTotal(calculaTotalProdutos());
    });
0

2 Respostas 2

2

Você está utilizando o mesmo ID id="quantidade" em vários elementos, IDs devem ser únicos (não repetidos). Altere o elemento removendo o ID e colocando uma classe, altere id="quantidade" para class="quantidade" e também no javascript altere $("#quantidade") para $(".quantidade").

Exemplo:

function total(valor){
$('span').text(valor);
}

$('.quantidade').change(function(){
    var valor = 0;
    $('.quantidade').each(function(index, element){
        if (element.value == undefined || element.value == '' || isNaN(element.value))
            element.value = 0;
        valor += parseInt(element.value);
    });
	total(valor);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Quantidades:</p>

<p>
<input class="quantidade" type="number" size="1" maxlength="2" max="10" min="0" step="0">
    
<input class="quantidade" type="number" size="1" maxlength="2" max="10" min="0" step="0">
    
<input class="quantidade" type="number" size="1" maxlength="2" max="10" min="0" step="0">
</p>

<p>Total: <span></span></p>

4
  • Porque não faz os cálculos no PHP e os retornos em javascript, muito mais seguro e prático. 2/09/2015 às 20:07
  • @IvanFerrer no caso isso é apenas para visualização do cliente (não vale a pena uma requisição ajax já que pode ser feito em javascript) é claro que quando for calcular realmente pra jogar no banco de dados deve ser feito no PHP (pelo menos assim espero que ele esteja fazendo).
    – KaduAmaral
    3/09/2015 às 1:16
  • 1
    Nossa! Esqueci do detalhe da ID AHAHAHAH utilizei as classes e funcionou. Desculpem a ignorância!!
    – Fred
    15/09/2015 às 18:37
  • @Fred isso é perfeitamente normal, acontece nas melhores famílias. :P Se a resposta corrigiu o problema marque ela como aceita, encerrando assim a questão. Basta clicar no ícone ao lado da resposta (abaixo dos votos).
    – KaduAmaral
    15/09/2015 às 18:39
0

O problema é que você está repetindo a id do elemento dentro do seu foreach, só que ele não pega a coleção de todos id=produto e nem de todos id=quantidade pois o atributo id só é representado por um único elemento, entretanto você pode usar o atributo da classe, desta maneira ele irá considerar todos da lista como se fosse uma coleção, neste sentido, você pode implementar desta maneira e ver se funciona:

Porém, antes de iniciar o foreach, inicie o incrimentador $count=0;.

                <tr id="produto_<?=$count?>" class="lista_produtos">
                    <td><?=$produto['nomeProduto'] ?></td>
                    <td><div id="valor_<?=$count?>"><?=$produto['valorProduto']?></div></td>
                    <td>
                        <input id="quantidade_<?=$count?>" class="qtde" type="number" size="1" maxlength="2" max="10" min="0" step="0">
                    </td>
                </tr>
                <?php
                     $count++;
                     endforeach;
                ?>
            </table>                
    <footer>
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <label> Total: </label>
            <div id="total" class="navbar-right">
              R$ 0,00
            </div>
        </nav>
    </footer>

E no javascript:

function calculaTotalProdutos(){
    var produtos = $(".lista_produtos");
    var totalProdutos = 0;

    for (var cont = 0; cont < produtos.length; cont++){
        var $produto = $(produtos[cont]);
        var quantidade = dinheiroTextoParaFloat(
            $produto.find("#quantidade_"+cont).val());
        var valor = dinheiroTextoParaFloat(
            $produto.find("#valor_"+cont).text());
        var subtotal = quantidade * valor;
        totalProdutos += subtotal;
    } 

    return totalProdutos;
}

Mas se preferir, você pode fazer desta forma:

http://jsfiddle.net/ivanferrer/qpg5cy83/1/

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 .