I have my order items being displayed with formset, the quantity and price columns are editable. I can not calculate the total after changing the price or quantity. I can identify the value typed by pressing enter, but how could I get the price to calculate the total and update this value in the total column? When loading the request, the total is being calculated in the class method, but to edit, it would be better to do the calculation on the client without having to make a request for the server.
{% 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>
After implementing the oninput (Jessika credits):
<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>functionatualizarDinamico(object){varpos=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>
To update the total, I'm trying this way, but I'm not getting it.
$('#id_form-' + indice + '-preco').parent().text(parseInt(quantidade) * parseFloat(preco));