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));