1

Eu tenho uma função que ao clicar sob um botão, ele acrescentaria campos, cada vez que adiciona, adiciona 3 campos, quantidade, valor total e valor subtotal. Minha dúvida é como eu faria para alterar o valor total ao mudar a quantidade ou o valor? Esses campos tem n vezes. Apenas a minha dúvida é na questão de Javascript/jQuery, o banco de dados recebe normalmente.

add_field() - Adiciona os campos como nome do produto, valor unitário, quantidade e valor total

function add_field()
    {
        var f = $("#div_addfield");
        f.append( '<br><hr><label for="nome_produto">Produto - ' + i + '</label> ' +
            '<input id="nome_produto" type="text" name="data[OrdemCompra_itens][' + i + '][nome_produto]" class="form-control" /><br>' +
            '<div class="form-inline">' +
            '<label>Quant:</label>' +
            '   <input type="number" name="data[OrdemCompra_itens][' + i + '][quantidade]" min="1" value="1" ' +
            '       style="width:70px;" class="form-control quantidade" />' +
            '<label>Vlr. Unit.:</label>' +
            '   <input type="text" name="data[OrdemCompra_itens][' + i + '][vlr_unit]"  ' +
            '       style="width:100px;" class="form-control real vlr_unit" />' +
            '<label>Vlr. Total.:</label>' +
            '   <input type="text" name="data[OrdemCompra_itens][' + i + '][vlr_total]" ' +
            '       style="width:120px;" class="form-control vlr_total"  value="0,00" />' +
            '</div><br>');

        i++;
        $(".real").maskMoney({showSymbol:true, symbol:"R$", decimal:",", thousands:"."});
    }

calcula() função responsável para fazer o calculo, multiplicando valor pela quantidade

function calcula(vlr_unit, quant)
{
    var res;
    res = parseFloat(vlr_unit.replace(".", "").replace(",", ".")) * quant;
    return parseFloat(res).toFixed(2).replace(".", ",");
}

Trecho que supostamente está o erro

$(document).on('change', ".vlr_unit, .quantidade", function () {
        $(".vlr_total").val(calcula($(".vlr_unit").val(), $(".quantidade").val()));
    });

Nesta última parte, ele só muda o primeiro campo adicionado


Ultima correção, até agora tudo certo, só resolvendo a questão decimal

$(document).on('change', ".vlr_unit, .quantidade", function () {
        var subtotal = 0, total = 0;

        $(".vlr_unit").each(function() {
            var quantidade = $(this).siblings('.quantidade').val();
            subtotal = calcula(this.value, quantidade);
            total += parseFloat(subtotal.replace(",", "."));
            $("#vlr_total").val(total);
            $(this).siblings(".vlr_subtotal").val(subtotal);
        });


    });

2 Respostas 2

1

O que você precisa é iterar todos os campos emparelhando corretamente os respetivos campos quantidade e valor. Aqui fica uma sugestão:

$(document).on('change', ".vlr_unit, .quantidade", function () {
    var total = 0;

    $(".vlr_unit").each(funtion() {
        var quantidade = $(this).siblings('.quantidade').val();
        total += calcula(this.value, quantidade);
    });

    $(".vlr_total").val(total);
});

O que esse código em cima faz é percorrer um a um todos os .vlr_unit e emparelhar com a .quantidade respectiva. Aí a cada um incrementa o total com o retorno da função calcula. No final de percorrer todos, envia o resultado para .vlr_total

4
  • No caso, onde está o valor_total seria o vlr_subtotal, o total vou fazer numa implementação mais pra frente e isso acaba me ajudando... cada vez que muda a quantidade ou o valor unitário, muda o valor do valor subtotal que é um campo ao lado de cada produto Commented 10/06/2014 às 18:30
  • @braulio_holtz, ok. De qq maneira acho que a minha resposta é a solução que precisa. Se colocar o seu HTML num jsFIddle, posso ajudar melhor caso não funcione à primeira.
    – Sergio
    Commented 10/06/2014 às 18:33
  • @braulio_holtz, ví agora que você nunca aceitou uma resposta. Não esqueça de escolher a melhor resposta em cada pergunta e clicar numa delas para aceitar. Pode lêr aqui sobre como fazer: meta.pt.stackoverflow.com/q/1078/129
    – Sergio
    Commented 10/06/2014 às 18:40
  • Consegui aqui $(document).on('change', ".vlr_unit, .quantidade", function () { var subtotal = 0, total = 0; $(".vlr_unit").each(function() { var quantidade = $(this).siblings('.quantidade').val(); subtotal = calcula(this.value, quantidade); total += parseFloat(subtotal.replace(",", ".")); $("#vlr_total").val(total); $(this).siblings(".vlr_subtotal").val(subtotal); }); }); Valeu pela ajuda, agora só tenho que ver a parte que faz o cálculo não acerta o padrão x,xx Commented 10/06/2014 às 19:37
0

$(".vlr_total").val(calcula($(".vlr_unit").val(), $(".quantidade").val())); diz para o jQuery pegar o primeiro elemento que contenha a classe .vlr_total e mudar o valor dele. Já para mudar o valor de todos os elementos que contenham a classe .vlr_total, você deve usar a função .each() do jQuery, que vai percorrer todos os elementos encontrados, e não somente o primeiro. No seu contexto se traduziria para o seguinte:

$(".vlr_total").each(function(){
    //this significa o elemento atual no loop
    $(this).val(calcula($(".vlr_unit").val(), $(".quantidade").val()));
});
1
  • no caso, o vlr_total deveria ser vlr_subtotal, pelo menos esta parte vou colocar depois e você já resolveu. O que eu precisaria por agora é, quando clico para adicionar um campo, sai o nome do produto, quantidade, valor unitário e o subtotal , gostaria de saber como pegar o valor unitário e multiplicar pela quantidade no respectivo campo de valor subtotal. Commented 10/06/2014 às 17:44

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 .