O seu HTML deve ser alterado. Adicionar a propriedade onkeyup
aos campos encargos
e desconto
.
Custo
<input type='text' class='form_campos calc' $input_total id='total_pedido' name='total_pedido' readonly='true' value='5.000,35' id="total_pedido">
<br>
Frete
<input type='text' class='form_campos calc' id='encargos' name='encargos' onkeyup='calcular()'>
<br>
Desconto
<input type='text' class='form_campos calc' id='desconto' name='desconto' onkeyup='calcular()'>
<br>
Total
<input type='text' class='form_campos calc2' id='total_val' name='total_val'>
A seguir é preciso definir a função calcular
:
//É necessário verificar se o campo "total_pedido" já foi renderizado e pode ser referenciado pelo script,
//por isso é preciso escutar o evento `DOMContentLoaded`.
var total = 0;
document.addEventListener("DOMContentLoaded", function(event) {
total = document.getElementById("total_pedido").value;
//Retiramos a formatação do campo e convertemos em uma string
total = Number(total.replace(/[.]+/g,"").replace(",","."));
//A função é executada para preencher o campo com o valor total
calcular();
});
function calcular() {
//Obtemos o valor do encargo e desconto
var encargos = Number(document.getElementById("encargos").value);
var desconto = Number(document.getElementById("desconto").value);
var t = total + encargos - desconto;
//Atualizamos o campo "total_val" com o valor total
document.getElementById("total_val").value = t.toLocaleString('pt-BR');
}
Veja em funcionamento aqui: https://jsfiddle.net/kmjr5atg/9/