3

campos do formulario

Pessoal tenho esses três campos em um sistema de cadastro de produtos. O primeiro é o preço de custo, o segundo o lucro em cima do primeiro e por ultimo o valor de venda do produto. O que acontece é que para calcular esse valor de venda eu criei uma função em javascript que calcula em cima dos dois primeiros campos e exibe o resultado no terceiro, vejam abaixo:

function calcular() {
            var custo = parseInt(document.getElementById("valor_custo").value);
            var lucro = parseInt(document.getElementById("lucro_sugerido").value);
            var input = document.getElementById("valor_venda");
            var result = document.createAttribute("value");
            result.value = custo + (custo * (lucro/100));

            input.setAttributeNode(result);
        }

Aí que começa o problema. A função funciona perfeitamente, porém eu coloquei máscaras nos campos como vocês podem ver na imagem, e a função simplesmente parou de funcionar com as máscaras, funciona apenas com os números, mas quando coloco as máscaras para de funcionar. Se puderem me ajudar ficarei muito grato!

Vejam o código completo:

//jquery para as mascaras de R$

$("#valor_custo").maskMoney({
                prefix: "R$",
                decimal: ",",
                thousands: "."
            });
            $("#valor_venda").maskMoney({
                prefix: "R$",
                decimal: ",",
                thousands: "."
            });
            
//jquery para a mascara de %
            
$("#lucro_sugerido").mask("00%");

//função js para retornar o valor de venda

function calcular() {
            var custo = parseInt(document.getElementById("valor_custo").value);
            var lucro = parseInt(document.getElementById("lucro_sugerido").value);
            var input = document.getElementById("valor_venda");
            var result = document.createAttribute("value");
            result.value = custo + (custo * (lucro/100));

            input.setAttributeNode(result);
        }
<!-- lembrando que isso está dentro de um <form> -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
<script src="https://cdn.rawgit.com/plentz/jquery-maskmoney/master/dist/jquery.maskMoney.min.js"></script>

<div class="vendas">
  <h4>Preço</h4>
  <input type="text" name="valor_custo" id="valor_custo" placeholder="Valor de custo*" required>
  <input type="text" name="lucro_sugerido" id="lucro_sugerido" value="50" placeholder="Lucro sugerido*" required>
  <input type="number" name="valor_venda" id="valor_venda" onfocus="calcular()" placeholder="Valor de venda*" readonly required>
</div>

1 Resposta 1

2

Há alguns problemas que precisam ser corrigidos no código. O type="number" do input valor de venda não vai aceitar máscara porque não aceita outra coisa que não seja número. Altere para type="text" mesmo.

A máscara também está invalidando o cálculo por causa do R$ e do %, e também é preciso remover os pontos das casas de milhar, quando houver, e substituir a vírgula das decimais por ponto.

O que se deve fazer é remover o que não for número dos valores e remover todos os pontos e depois substituir a vírgula por ponto. Para isso pode usar um replace com expressão regular no valor do primeiro campo:

var custo = parseInt(document.getElementById("valor_custo").value.replace(/[R$\.]/g, "").replace(",", "."));

A expressão /[R$\.]/g irá remover R, $ e o ponto. Depois mais um replace para a vírgula.

No valor do segundo campo você pode usar um replace simples para remover o %:

var lucro = document.getElementById("lucro_sugerido").value.replace("%", "");

Não precisa usar parseInt na variável lucro porque você não irá usar esse valor para soma ou subtração.

O parseInt também irá ignorar os centavos, portanto troque por parseFloat apenas na variável custo:

var custo = parseFloat(document.getElementById("valor_custo").value.replace(/[R$\.]/g, "").replace(",", "."));

Outro problema é que caso haja centavos, a máscara irá multiplicar o valor por 100 porque ela adiciona dois zeros no final do valor. Para corrigir isso é preciso usar mais dois métodos no valor final: .toFixed(2) e mais um replace para substituir o ponto pela vírgula:

(custo + (custo * (lucro/100))).toFixed(2).replace(".", ",");

Outra coisa é que não precisa criar nó de atributo, basta colocar elemento.value = valor; que o value já é incluído no campo.

Veja:

//jquery para as mascaras de R$

$("#valor_custo").maskMoney({
                prefix: "R$",
                decimal: ",",
                thousands: "."
            });
            $("#valor_venda").maskMoney({
                prefix: "R$",
                decimal: ",",
                thousands: "."
            });
            
//jquery para a mascara de %
            
$("#lucro_sugerido").mask("00%");

//função js para retornar o valor de venda

function calcular() {
            var custo = parseFloat(document.getElementById("valor_custo").value.replace(/[R$\.]/g, "").replace(",", "."));
            var lucro = document.getElementById("lucro_sugerido").value.replace("%", "");
            var input = document.getElementById("valor_venda");
//            var result = document.createAttribute("value");
//            result.value = custo + (custo * (lucro/100));
//            input.setAttributeNode(result);
            input.value = (custo + (custo * (lucro/100))).toFixed(2).replace(".", ",");
        }
<!-- lembrando que isso está dentro de um <form> -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
<script src="https://cdn.rawgit.com/plentz/jquery-maskmoney/master/dist/jquery.maskMoney.min.js"></script>

<div class="vendas">
  <h4>Preço</h4>
  <input type="text" name="valor_custo" id="valor_custo" placeholder="Valor de custo*" required>
  <input type="text" name="lucro_sugerido" id="lucro_sugerido" value="50" placeholder="Lucro sugerido*" required>
  <input type="text" name="valor_venda" id="valor_venda" onfocus="calcular()" placeholder="Valor de venda*" readonly required>
</div>

4
  • 2
    Sam está otimo sua sugestao. Mas o parseInt vai gerar calculos errados. Talvez o parseFloat seria melhor.
    – Eloa
    Commented 16/11/2018 às 17:51
  • Verdade! Irá funcionar se o valor não tiver centavos. Vou dar uma olhada aqui. ObG!
    – Sam
    Commented 16/11/2018 às 17:58
  • Agora resolveu! 👍
    – Sam
    Commented 16/11/2018 às 18:29
  • Cara, MUITO OBRIGADO. Eu sou iniciante no javascript e você resolveu meu problema! Funcionou perfeitamente.
    – Sallazar
    Commented 17/11/2018 às 11:00

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 .