0

Tenho os meus itens do pedido sendo exibidos com formset, as colunas quantidade e preço são editáveis. Não estou conseguindo calcular o total após alterar o preço ou a quantidade. Consigo identificar o valor digitado pressionando enter, mas como poderia pegar o preço calcular o total e atualizar esse valor na coluna de total? Ao carregar o pedido, o total está sendo calculado no método da classe, mas para editar, seria melhor fazer o calculo no cliente sem precisar fazer uma requisição para o servidor.

{% load widget_tweaks %}

{{ formset.management_form }}
<div class="table-responsive">
    <table class="table">
        <thead>
            <th>Código</th>
            <th>Descrição</th>
            <th style="width: 10%;">Quantidade</th>
            <th>Preço</th>
            <th>Valor total</th>
            <th>Ação</th>
            <tbody>
                {% for form in formset %}
                <tr>
                    <td>{{ form.instance.produto.pk }}</td>
                    <td>{{ form.instance.produto }}</td>
                    <td>{% render_field form.quantidade class='form-control quantidade' %}</td>
                    <td>{% render_field form.preco class='form-control preco' %}</td>
                    <td>{{ form.instance.get_valorTotal }}</td>
                    <td class="text-center">
                            <button value="on" type="submit" name="{{ form.DELETE.html_name }}" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            {{ form.id }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </thead>
    </table>
</div>    
<script>
$(document).ready(function(){
    $(".quantidade").keydown(function(e){
        if (e.which==13) {
            alert($(this).val());
            alert($(this).parent().next('td').html());
            return false;
        }
    });

});
</script> 

Após implementar o oninput (créditos Jessika):

<input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="4"><input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="4"><input id="id_form-MIN_NUM_FORMS" name="form-MIN_NUM_FORMS" type="hidden" value="0"><input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000">
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr><th>Código</th>
            <th>Descrição</th>
            <th style="width: 10%;">Quantidade</th>
            <th>Preço</th>
            <th>Valor total</th>
            <th>Ação</th>
            </tr></thead><tbody>

                <tr>
                    <td>1</td>
                    <td>Processador I7</td>
                    <td><input class="form-control quantidade" id="id_form-0-quantidade" min="0" name="form-0-quantidade" oninput="atualizarDinamico()" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-0-preco" name="form-0-preco" step="0.01" type="number" value="1900.00"></td>
                    <td>1900.00</td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-0-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-0-id" name="form-0-id" type="hidden" value="6">
                    </td>
                </tr>

                <tr>
                    <td>6</td>
                    <td>Teclado Dell</td>
                    <td><input class="form-control quantidade" id="id_form-1-quantidade" min="0" name="form-1-quantidade" oninput="atualizarDinamico()" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-1-preco" name="form-1-preco" step="0.01" type="number" value="150.00"></td>
                    <td>150.00</td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-1-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-1-id" name="form-1-id" type="hidden" value="7">
                    </td>
                </tr>

                <tr>
                    <td>5</td>
                    <td>Mouse Logitech XPTO</td>
                    <td><input class="form-control quantidade" id="id_form-2-quantidade" min="0" name="form-2-quantidade" oninput="atualizarDinamico()" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-2-preco" name="form-2-preco" step="0.01" type="number" value="180.00"></td>
                    <td>180.00</td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-2-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-2-id" name="form-2-id" type="hidden" value="8">
                    </td>
                </tr>

                <tr>
                    <td>3</td>
                    <td>iPhone 6S</td>
                    <td><input class="form-control quantidade" id="id_form-3-quantidade" min="0" name="form-3-quantidade" oninput="atualizarDinamico()" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-3-preco" name="form-3-preco" step="0.01" type="number" value="3500.00"></td>
                    <td>3500.00</td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-3-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-3-id" name="form-3-id" type="hidden" value="9">
                    </td>
                </tr>

            </tbody>

    </table>
</div>    
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
    function atualizarDinamico(object){
        var pos = object.indexOf("-")
        var indice = object.substr(pos+1, 1);

        var quantidade = $('#id_form-' + indice + '-quantidade').val();
        var preco = $('#id_form-' + indice + '-preco').val();

        console.log(quantidade);
        console.log(preco);
        console.log(object);

        console.log(parseFloat(quantidade) * parseFloat(preco));

        $('#total').val(parseFloat(quantidade) * parseFloat(preco)); 
    }
</script>

Para atualizar o total, estou tentando dessa forma, mas não estou conseguindo.

$('#id_form-' + indice + '-preco').parent().text(parseInt(quantidade) * parseFloat(preco));

1 Resposta 1

1

$('#t1').on('input', function() {
    atualizarTotal();
});
$('#t2').on('input', function() {
    atualizarTotal();
});

function atualizarTotal(){
		valorQnt = $('#t1').val();
    valorPreco = $('#t2').val();
    $('#total').val(parseInt(valorQnt) * parseInt(valorPreco));
}
<p>Preço</p>
<input id="t1" value='1'>
<p>Quantidade</p>
<input id="t2" value='1'>
<p>Total</p>
<input id="total" value='1'>

<h2>Exemplo dinamico</h2>
<p>Preço</p>
<input id="d1" value='1' oninput="atualizarDinamico('d1','d2','totalD')">
<p>Quantidade</p>
<input id="d2" value='1' oninput="atualizarDinamico('d1','d2','totalD')">
<p>Total</p>
<input id="totalD" value='1' oninput="atualizarDinamico('d1','d2','totalD')">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

function atualizarDinamico(preco,qnt,total){
		valorQnt = $("#"+preco).val();
    valorPreco = $("#"+qnt).val();
    $("#"+total).val(parseInt(valorQnt) * parseInt(valorPreco));
}

</script>

Fiz um exemplo para te ajudar, a ideia é o seguinte: toda vez que os inputs de preço e quantidade forem alterados é chamada a função atualizarTotal para atualizar o valor do total.

<input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="4"><input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="4"><input id="id_form-MIN_NUM_FORMS" name="form-MIN_NUM_FORMS" type="hidden" value="0"><input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000">
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr><th>Código</th>
            <th>Descrição</th>
            <th style="width: 10%;">Quantidade</th>
            <th>Preço</th>
            <th>Valor total</th>
            <th>Ação</th>
            </tr></thead><tbody>

                <tr>
                    <td>1</td>
                    <td>Processador I7</td>
                    <td><input class="form-control quantidade" id="id_form-0-quantidade" min="0" name="form-0-quantidade" oninput="atualizarDinamico(this)" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-0-preco" oninput="atualizarDinamico(this)" name="form-0-preco" step="0.01" type="number" value="1900.00"></td>
                    <td><span id="total-0">1900.00</span></td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-0-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-0-id" name="form-0-id" type="hidden" value="6">
                    </td>
                </tr>

                <tr>
                    <td>6</td>
                    <td>Teclado Dell</td>
                    <td><input class="form-control quantidade" id="id_form-1-quantidade" min="0" name="form-1-quantidade" oninput="atualizarDinamico(this)" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-1-preco" oninput="atualizarDinamico(this)" name="form-1-preco" step="0.01" type="number" value="150.00"></td>
                    <td><span id="total-1">150.00</span></td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-1-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-1-id" name="form-1-id" type="hidden" value="7">
                    </td>
                </tr>

                <tr>
                    <td>5</td>
                    <td>Mouse Logitech XPTO</td>
                    <td><input class="form-control quantidade" id="id_form-2-quantidade" min="0" name="form-2-quantidade" oninput="atualizarDinamico(this)" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-2-preco" oninput="atualizarDinamico(this)" name="form-2-preco" step="0.01" type="number" value="180.00"></td>
                    <td><span id="total-2">180.00</span></td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-2-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-2-id" name="form-2-id" type="hidden" value="8">
                    </td>
                </tr>

                <tr>
                    <td>3</td>
                    <td>iPhone 6S</td>
                    <td><input class="form-control quantidade" id="id_form-3-quantidade" min="0" name="form-3-quantidade" oninput="atualizarDinamico(this)" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-3-preco" oninput="atualizarDinamico(this)" name="form-3-preco" step="0.01" type="number" value="3500.00"></td>
                    <td><span id="total-3">3500.00</span></td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-3-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-3-id" name="form-3-id" type="hidden" value="9">
                    </td>
                </tr>

            </tbody>

    </table>
</div>    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    function atualizarDinamico(object){
    		
        var indice = object.closest("tr").rowIndex - 1;
        var quantidade = $('#id_form-' + indice + '-quantidade').val();
        var preco = $('#id_form-' + indice + '-preco').val();

        console.log(quantidade);
        console.log(preco);
        console.log(object);

        console.log(parseFloat(quantidade) * parseFloat(preco));

        document.getElementById('total-'+ indice).innerHTML = parseFloat(quantidade) * parseFloat(preco); 
    }
</script>

Segundo exemplo.

6
  • Jessika, muito obrigado pela sua sugestão. Eu só fiquei com uma dúvida, os meu ids são gerados automaticamente, como poderia fazer referencia a esses inputs? Com certeza a sua solução funciona, só preciso saber como referenciar os inputs que são criados dinamicamente. Obrigado.
    – Seixas
    Commented 7/04/2017 às 13:53
  • Tenta chamar a função atualizarTotal no input: <input type="text" oninput="atualizarTotal(idPreco,idQnt,idTotal)">, modificando a função atualizarTotal para ficar dinâmica, assim funcionaria para qualquer id que você passar por parâmetro. Editei a resposta com 1 exemplo
    – Jessika
    Commented 7/04/2017 às 14:52
  • Jessika, sem dúvida o oninput é a solução. Consegui pegar o preço, quantidade e calcular o total, só preciso atualizar o <td> que fica após o preço referente ao total. Usar o parent seria a melhor solução? Obrigado pela ajuda. Eu incluí o código atual já com as atualizações na minha pergunta.
    – Seixas
    Commented 7/04/2017 às 21:56
  • Dá uma olhada no segundo exemplo =)!! Eu usei o closest para pegar o tr pai do input e assim consegui pegar o index para gerar os ids dinâmicos. Coloquei o total dentro de um span e coloquei o id seguindo a sua mesma ideia dos ids. Pegando o id do total eu alterei o valor dentro do spancom o .html.
    – Jessika
    Commented 8/04/2017 às 1:45
  • Vou testar agora, já retorno. Obrigado.
    – Seixas
    Commented 8/04/2017 às 1:54

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 .