I can not place function on inputs that contain masks

Question

I can not place function on inputs that contain masks

Navigation

#1 by (2 votes)

3

PersonalIhavethesethreefieldsinaproductregistrationsystem.Thefirstisthecostprice,thesecondistheprofitontopofthefirst,andfinallythesalesvalueoftheproduct.WhathappensisthattocalculatethissalesvalueIcreatedafunctioninjavascriptthatcalculatesoverthefirsttwofieldsanddisplaystheresultinthethird,seebelow:

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);
        }

That's where the problem starts. The function works perfectly, however I put masks in the fields as you can see in the image, and the function simply stopped working with the masks, it only works with the numbers, but when I put the masks to stop working. If you can help me, I'll be very grateful!

See the complete code:

//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><scriptsrc="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><divclass="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>

javascript html jquery css

asked by anonymous 16.11.2018 / 17:41

1 answer

What should I use to make one grid system within another? Check if the graph is connected

score 2 · Accepted Answer

There are some issues that need to be addressed in the code. The% of the% of the sales value input will not accept the mask because it does not accept anything other than a number. Change to type="number" same.

The mask is also invalidating the calculation because of type="text" and R$ , and it is also necessary to remove the points of the thousand houses, if any, and replace the comma of decimals by point.

What you should do is remove what is not a number from the values and remove all points and then replace the comma with a period. For this you can use a regular expression replace with the value of the first field:

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

The expression % will remove /[R$\.]/g , R , and the period. Then one more replace for the comma.

In the value of the second field you can use a simple replace to remove $ :

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

You do not need to use % in the variable parseInt because you will not use this value for addition or subtraction.

lucro will also ignore the cents, so change by parseInt only in the parseFloat variable:

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

Another problem is that if there are cents, the mask will multiply the value by 100 because it adds two zeros at the end of the value. To correct this you need to use two more methods in the final value: custo and one more replace to replace the period with the comma:

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

Another thing is that you do not need to create an attribute node, just put .toFixed(2) that elemento.value = valor; is already included in the field.

See:

//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><scriptsrc="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><divclass="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>