Calculate inputs with Jquery

Asked

Viewed 727 times

1

I’m having trouble understanding how input calculation works with Jquey.

I will show the following example:

<!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>

I don’t know, I have no idea how to do that when you put values in the fields, you get the result.

I’ve made adaptations in other projects like:

<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>

But I don’t even understand how it starts and more or less how it ends. I’m getting deeper into Jquery, but I admit I need help this time.

Thank you.

It worked, but a problem has arisen.

I made that calculation:

$('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);
});

If I put 1,000,000 into the input, instead of calculating 1,010,00, it calculates 11.

I put, I took parentheses, but nothing to improve this crazy sum.

If for the last time anyone can give me a light, I’d appreciate it.

jquery

2 answers

0

The easiest way is to modify the code to directly access each field, then do whatever you want with them. Then I’d be:

<!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>

and the script would be...

<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>

I need to note that, this code is relatively simple, so I suggest studying a little programming logic before Jquery :)

0


Rogério, I believe that this is what you were trying to do, I made the code as simple and intuitive so that you understand well what is happening, in each input put the function change which detects changes in the element, in this function the values of the input’s are summed and assigned to the total, finally the code ta well self-explanatory.
*Obs: I put a table only p/ same display issue.

$(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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.