How to perform multiple input calculation with jQuery

Question

How to perform multiple input calculation with jQuery

Navigation

#1 by (1 votes)

0

Well, I've built a jQuery calculation system well, where I can tell you the cost of a product. When informing the sale value the system performs the margin calculation, if I inform the margin the system calculates the sales value.

All this based on cost. What I'm trying to do is, how do I change the cost of all values to be recalculated respecting the margin.

Can anyone help me? Here's what I've done.

$(document).ready(function() {

  // Faz o calculo da margem com base no valor
  $(".custo").on("keyup", function() {

    // aqui eu tenho que alterar todos os input valor
  });


  // Faz o calculo da margem com base no valor
  $(".valor").on("keyup", function() {

    // Valor
    var valor = $(this).val();
    valor = Formata_Moeda(valor);

    // Custo
    var custo = $('#custo').val();
    custo = Formata_Moeda(custo);

    // Calcula markup
    var calculo = (valor - custo) / custo * 100;

    // Formata valor para pt-br
    calculo = Formata_Dinheiro(calculo);

    // Verifica valor da margem
    if (calculo === "-Infinity") {
      calculo = 0;
    }

    // Atualiza input
    var inputMargem = $(this).attr("margem");
    $("#" + inputMargem).val(calculo).trigger('blur');
  });

  // Faz o calculo do valor com base na margem
  $(".margem").on("keyup", function() {

    // Margem
    var margem = $(this).val();
    margem = Formata_Moeda(margem);

    // Custo
    var custo = $('#custo').val();
    custo = Formata_Moeda(custo);

    // Calcula markup
    var calculo = (custo * margem / 100) + custo;

    // Formata valor para pt-br
    calculo = Formata_Dinheiro(calculo);

    // Atualiza input
    var inputValor = $(this).attr("valor");
    $("#" + inputValor).val(calculo).trigger('blur');
  });
});


function Formata_Moeda(valor) {
  // Remove todos os .
  valor = valor.replace(/\./g, "");

  // Troca todas as , por .
  valor = valor.replace(",", ".");

  // Converte para float
  valor = parseFloat(valor);
  valor = parseFloat(valor) || 0.0;

  return valor;
}

function Formata_Dinheiro(n) {
  return n.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
custo:
<input type='text' class='custo' id='custo' name='custo' value='8'>

<br>
<br>
<br> Valor X Margem<br>
<input type='text' class='valor valores' id='valor1' name='valor1' margem='margem1' value='10'>
<input type='text' class='margem lucro' id='margem1' name='margem1' valor='valor1' value='25'>

<br>
<br>
<br> Valor X Margem<br>
<input type='text' class='valor valores' id='valor2' name='valor2' margem='margem2' value='20'>
<input type='text' class='margem lucro' id='margem2' name='margem2' valor='valor2' value='150'>

javascript jquery

asked by anonymous 12.04.2017 / 20:35

1 answer

How to create a user-sized tray and display it as text using python? Error with Mysql insert with JDBC

score 1 · Accepted Answer

Good night, insert the following code forcing the flames to the events, I did not verify if the calculated values are what is expected.

// Faz o calculo da margem com base no valor
      $(".custo").on("keyup", function() {
        // aqui eu tenho que alterar todos os input valor
        $(".valor").keyup();
        $(".margem").keyup();
      });

Follow the complete code:

<html>
<head>
  <meta charset='utf-8' />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript">
	$(document).ready(function() {

	  // Faz o calculo da margem com base no valor
	  $(".custo").on("keyup", function() {
		// aqui eu tenho que alterar todos os input valor
		$(".valor").keyup();
		$(".margem").keyup();
	  });


	  // Faz o calculo da margem com base no valor
	  $(".valor").on("keyup", function() {

		// Valor
		var valor = $(this).val();
		valor = Formata_Moeda(valor);

		// Custo
		var custo = $('#custo').val();
		custo = Formata_Moeda(custo);

		// Calcula markup
		var calculo = (valor - custo) / custo * 100;

		// Formata valor para pt-br
		calculo = Formata_Dinheiro(calculo);

		// Verifica valor da margem
		if (calculo === "-Infinity") {
		  calculo = 0;
		}

		// Atualiza input
		var inputMargem = $(this).attr("margem");
		$("#" + inputMargem).val(calculo).trigger('blur');
	  });

	  // Faz o calculo do valor com base na margem
	  $(".margem").on("keyup", function() {

		// Margem
		var margem = $(this).val();
		margem = Formata_Moeda(margem);

		// Custo
		var custo = $('#custo').val();
		custo = Formata_Moeda(custo);

		// Calcula markup
		var calculo = (custo * margem / 100) + custo;

		// Formata valor para pt-br
		calculo = Formata_Dinheiro(calculo);

		// Atualiza input
		var inputValor = $(this).attr("valor");
		$("#" + inputValor).val(calculo).trigger('blur');
	  });
	});


	function Formata_Moeda(valor) {
	  // Remove todos os .
	  valor = valor.replace(/\./g, "");

	  // Troca todas as , por .
	  valor = valor.replace(",", ".");

	  // Converte para float
	  valor = parseFloat(valor);
	  valor = parseFloat(valor) || 0.0;

	  return valor;
	}

	function Formata_Dinheiro(n) {
	  return n.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
	}
  </script>
</head>
<body>
custo:
<input type='text' class='custo' id='custo' name='custo' value='8'>

<br>
<br>
<br> Valor X Margem<br>
<input type='text' class='valor valores' id='valor1' name='valor1' margem='margem1' value='10'>
<input type='text' class='margem lucro' id='margem1' name='margem1' valor='valor1' value='25'>

<br>
<br>
<br> Valor X Margem<br>
<input type='text' class='valor valores' id='valor2' name='valor2' margem='margem2' value='20'>
<input type='text' class='margem lucro' id='margem2' name='margem2' valor='valor2' value='150'>
</body>
</html>