how to perform calculations between 4 input, loading page or change value

Question

I have 4 input fields, being:

1. Cost that already comes with a value
2. The freight field, which when changed the value must be added to the cost and displayed in total
3. The discount field, which when changing the value must subtract from the total

Well I don’t know how to do it.

Follow the code with the input.

Custo
<input type='text' class='form_campos calc' $input_total id='total_pedido' name='total_pedido' readonly='true' value='5.000,30'>

<br>
Frete
<input type='text' class='form_campos calc' id='encargos' name='encargos'>

<br>
Desconto
<input type='text' class='form_campos calc' id='desconto' name='desconto'>

<br>
Total
<input type='text' class='form_campos calc2' id='total_val' name='total_val'>

Answer 1

Your HTML must be changed. Add property onkeyup to the fields encargos and 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'>

Next we need to define the function 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');
}

See working here: https://jsfiddle.net/kmjr5atg/9/

Answer 2

Explaining the code below;

1. Through the ID, captured the references of the HTML;
2. Added an event for the elements desconto and frete, so that these will perform the function calcular() whenever a key pressed is released;
3. We define the function calcular, that transforms the values of inputs into numbers through the builder Number and makes the calculation (total = custo + frete - desconto);
4. Finally, we attribute to value of the element total the calculation made, formatting your presentation to 'pt-BR' with the method toLocaleString

var frete = document.getElementById("encargos");
var desconto = document.getElementById("desconto");
var total = document.getElementById("total_val");
var custo = document.getElementById("total_pedido");

/*Criando eventos para executarem a função calcular sempre que uma tecla for pressionada*/
desconto.addEventListener("keyup", function() {
  calcular();
});

frete.addEventListener("keyup", function() {
  calcular();
});

/*Função calcular; converte os valores dos inputs para float e então calcula (total = custo + frete - desconto)*/
function calcular() {
  var valorTotal = Number(custo.value) + Number(frete.value) - Number(desconto.value);
  total.value = valorTotal.toLocaleString('pt-BR');
}

Custo
<input type='text' class='form_campos calc' $input_total id='total_pedido' name='total_pedido' readonly='true' value='5000.30'>

<br>Frete
<input type='text' class='form_campos calc' id='encargos' name='encargos'>

<br>Desconto
<input type='text' class='form_campos calc' id='desconto' name='desconto'>

<br>Total
<input type='text' class='form_campos calc2' id='total_val' name='total_val'>

References

• Events in javascript
• Number constructor
• Number.toLocaleString
• Document.getElementById

Answer 3

    //obtenho o valor dos campos
    var vtotal = $('#total_pedido').val();
    var vfrete = $('#encargos').val();
    var desconto= $('#desconto').val();

    //efetuo o calculo que será exibido no ultimo input
    vtotal = ((vtotal+vfrete)-desconto);
    //escrevo o resultado no ultimo input
    $('#total_val').val(vtotal);

   // lembrando que as tags dessa pergunta mencionam javascript E JQuery