1

Tenho 4 campos input, sendo:

  1. Custo que já vem com um valor no value
  2. O campo frete, que ao ser alterado o valor deve ser somado com o custo e exibido no total
  3. O campo desconto, que ao ser alterado o valor deve subtrair do total

Bom não sei como fazer isso.

Segue o código com os 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'>

3 Respostas 3

3

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/

13
  • perfeito, so tem mais duas coisas. notei que para executar tenho que colocar um valor no frete ou desconto, tem com executar mesmo eles estando em branco? ou seja ja carregar a pagina executando. 2º e possível escrever o valor total no padrão 1.000,00? Commented 24/02/2016 às 14:09
  • @HugoBorges, sim, tem. Alterei a resposta, veja se é o pretendido. Commented 24/02/2016 às 14:13
  • @HugoBorges adicionei o valor formatado no exemplo da resposta, veja funcionando: jsfiddle.net/kmjr5atg/4 Commented 24/02/2016 às 14:17
  • é isso mesmo, porém ao invés de aparecer o R$ no total eu preciso do valor apenas formatado em pt-br 1.000,00. Commented 24/02/2016 às 14:19
  • @HugoBorges basta então remover a string "RS" no código acima. Atualizei a resposta. Commented 24/02/2016 às 14:20
2

Explicando o código abaixo;

  1. Através do ID, capturamos as referências dos inputs do HTML;
  2. Adicionamos um evento para os elementos desconto e frete, de modo que estes irão executar a função calcular() sempre que uma tecla pressionada for liberada;
  3. Definimos a função calcular, que transforma os valores dos inputs em números através do construtor Number e realiza o cálculo (total = custo + frete - desconto);
  4. Por fim, atribuímos ao value do elemento total o cálculo realizado, formatando sua apresentação para 'pt-BR' com o método 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'>

Referências

4
  • 1
    ok, porém tem algumas coisa que precisa ser alteradas. notei que o so funciona se eu informar um valor para frete e desconto, porem preciso que ele funcione se nenhum valor for informado. Tem como? Commented 24/02/2016 às 14:03
  • Vou atualizar a resposta, estou sem muito tempo agora. É possível atualizando a função calcular. Sugiro iniciar ambos os campos com valor 0. Também foi necessário formatar o campo custo pois o valor "5.000,03" não pode ser convertido em float sem tratamento antes. Em breve atualizo a resposta com ambas as informações
    – Vinícius
    Commented 24/02/2016 às 14:05
  • ok fico no aguardo Commented 24/02/2016 às 14:10
  • Código foi atualizado para funcionar apenas com os valores informados
    – Vinícius
    Commented 24/02/2016 às 14:34
-1
    //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
3
  • 2
    como eu chamo a função no input? Commented 24/02/2016 às 14:02
  • Poderia explicar o que faz esse código?
    – rray
    Commented 24/02/2016 às 14:16
  • Para chamar a função no input crie uma função javascript com o nome que desejar, utilize o evento do input para chamar a função. Exemplo, se você deseja chamar a função de nome calcular quando o usuario tirar o foco de um input você coloca isso no input onBlur="javascript:calcular();". Para o amigo que pediu pra eu explicar o que faz a função. Nas três primeiras linhas eu obtenho o valor dos inputs, na quarta eu efetuo o calculo e escrevo o resultado no ultimo input. Obviamente está faltando o devido tratamento quando há campos nulos, assim como as conversões com parseFloat(). Commented 24/02/2016 às 18: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 .