1

Estou com problemas em entender como funciona o cálculo de inputs com Jquey.

Vou mostrar o seguinte exemplo:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input type="text" name="campo_1" class="campo_1">
<input type="text" name="campo_2" class="campo_2">
<input type="text" name="res_1" class="res_1">
<!-- Resultado de campo_1 * campo_2 -->

<input type="text" name="campo_3" class="campo_3">
<input type="text" name="campo_4" class="campo_4">
<input type="text" name="res_2" class="res2">
<!-- Resultado de campo_3 * campo_4 -->

<input type="text" name="res_3" class="res3">
<!-- Resultado de campo_1 + campo_2 + campo_3 + campo_4 -->

</body>
</html>

Eu não sei, não faço ideia de como fazer que quando se coloque valores nos campos, se obtenha o resultado.

Já fiz adaptações em outros projetos do tipo:

<script type="text/javascript">
	function updateTotal_836() {
		var total_836 = 0;
		var list_836 = document.getElementsByClassName("input[836]");

		var values = [];
		for(var i = 0; i < list_836.length; ++i) {
			values.push(parseFloat(list_836[i].value));
		}
		total_836 = values.reduce(function(previousValue, currentValue, index, array){
			return previousValue * currentValue;
		});
		if(isNaN(parseFloat(total_836))){
			document.getElementById("valor_total[836]").value = 0; 
		}else{
			document.getElementById("valor_total[836]").value = total_836;    
		}
	}
</script>

Mas não entendi nem como começa e mais ou menos como termina. Estou me aprofundando em Jquery, mas admito que dessa preciso de ajuda.

Obrigado.


Deu certo, mas surgiu um problema.

Fiz esse cálculo:

$('input[name="rec_vista"]').change(function(e) {
  if (!$('input[name="rec_vista"]').val()) {
    $('input[name="rec_vista"]').val(0);
  }
  var rec_vista = parseFloat($('input[name="rec_vista"]').val());
  a_vista = rec_vista + 10;
  $('input[name="a_vista"]').val(a_vista);
});

Se eu colocar 1.000.000 no input, ao invés de calcular 1.010.00, ele calcula 11.

Eu coloquei, tirei parênteses, mas nada de melhorar essa soma maluca.

Se pela última vez alguém puder me dar uma luz, eu agradeço.

2 Respostas 2

0

Rogério, acredito que seja isso que tu estava tentando fazer, fiz o código o mais simples e intuitivo para que tu compreenda bem o que está acontecendo, em cada input coloquei a função change que detecta alterações no elemento, nessa função os valores dos input's são somados e atribuídos ao total, enfim o código ta bem autoexplicativo.
*obs: coloquei uma table só p/ questão de visualização mesmo.

$(document).ready(function() {
  var res1 = 0;
  var res2 = 0;
  var resTotal = 0;
  
  $('input[name="campo_1"]').change(function(e) {
    if (!$('input[name="campo_1"]').val()) $('input[name="campo_1"]').val(0);
    var valorCampo1 = parseInt($('input[name="campo_1"]').val());
    var valorCampo2 = parseInt($('input[name="campo_2"]').val());
    res1 = valorCampo1 + valorCampo2;
    $('input[name="res_1"]').val(res1);
  });

  $('input[name="campo_2"]').change(function(e) {
    if (!$('input[name="campo_2"]').val()) $('input[name="campo_2"]').val(0);
    var valorCampo1 = parseInt($('input[name="campo_1"]').val());
    var valorCampo2 = parseInt($('input[name="campo_2"]').val());
    res1 = valorCampo1 + valorCampo2;
    $('input[name="res_1"]').val(res1);
  });

  $('input[name="campo_3"]').change(function(e) {
    if (!$('input[name="campo_3"]').val()) $('input[name="campo_3"]').val(0);
    var valorCampo3 = parseInt($('input[name="campo_3"]').val());
    var valorCampo4 = parseInt($('input[name="campo_4"]').val());
    res2 = valorCampo3 + valorCampo4;
    $('input[name="res_2"]').val(res2);
  });

  $('input[name="campo_4"]').change(function(e) {
    if (!$('input[name="campo_4"]').val()) $('input[name="campo_4"]').val(0);
    var valorCampo3 = parseInt($('input[name="campo_3"]').val());
    var valorCampo4 = parseInt($('input[name="campo_4"]').val());
    res2 = valorCampo3 + valorCampo4;
    $('input[name="res_2"]').val(res2);
  });

  $('input').change(function(e) {
    resTotal = parseInt($('input[name="res_1"]').val()) + parseInt($('input[name="res_2"]').val());
    $('input[name="res_3"]').val(resTotal);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <td>
        Campo 1
      </td>
      <td>
        Campo 2
      </td>
      <td>
        Total
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="campo_1" class="campo_1" value="0">
      </td>
      <td>
        <input type="text" name="campo_2" class="campo_2" value="0">
      </td>
      <td>
        <input type="text" name="res_1" class="res_1" value="0">
      </td>
    </tr>
    <tr>
      <td>
        Campo 3
      </td>
      <td>
        Campo 4
      </td>
      <td>
        Total
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="campo_3" class="campo_3" value="0">
      </td>
      <td>
        <input type="text" name="campo_4" class="campo_4" value="0">
      </td>
      <td>
        <input type="text" name="res_2" class="res2" value="0">
      </td>
    </tr>
    <tr>
      <td>
        Total Geral (res1+res2)
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="res_3" class="res3" value="0">
      </td>
    </tr>

  </table>
</body>

</html>

0

O modo mais fácil é vc modificar o código para acessar diretamente cada campo, então fazer o que vc quiser com eles. Nesse caso, ficaria:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input id="campo_1" type="text" name="campo_1" class="campo_1">
<input id="campo_2" type="text" name="campo_2" class="campo_2">
<input id="res_1" type="text" name="res_1" class="res_1">
<!-- Resultado de campo_1 * campo_2 -->

<input id="campo_3" type="text" name="campo_3" class="campo_3">
<input id="campo_4" type="text" name="campo_4" class="campo_4">
<input id="res_2" type="text" name="res_2" class="res2">
<!-- Resultado de campo_3 * campo_4 -->

<input id="res_3" type="text" name="res_3" class="res3">
<!-- Resultado de campo_1 + campo_2 + campo_3 + campo_4 -->

</body>
</html>

e o script ficaria...

<script type="text/javascript">
var campo_1 = $('#campo_1').val();
var campo_2 = $('#campo_3').val();

$('#res_1').val(campo_1*campo_2);

var campo_3 = $('#campo_3').val();
var campo_4 = $('#campo_4').val();
$('#res_2').val(campo_3*campo_4);

$('#res_3').val(campo_1+campo_2+campo_3+campo_4);
<script>

Preciso notar que, esse código é relativamente simples, logo sugiro estudar um pouco lógica de programação antes de JQuery :)

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 .