Calculate inputs with Jquery

Question

Calculate inputs with Jquery

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm having trouble figuring out how the input calculation works with Jquey.

I'll 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 do not know, I have no idea how to do that when you put values in the fields, if you get the result.

I have made adaptations in other projects of the type:

<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 do not understand how it starts and more or less how it ends. I'm digging into Jquery, but I admit that I need help.

Thank you.

It worked, but there was a problem.

I made this 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 in the input, instead of calculating 1,010.00, it calculates 11.

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

If someone can give me a light one last time, I thank you.

jquery

asked by anonymous 15.03.2017 / 03:13

2 answers

0

The easiest way is to modify the code to directly access each field, then do whatever you want with them. In this case, it would look like:

<!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 you study a little programming logic before JQuery:)

15.03.2017 / 03:57

Read specific XML tags? iTextSharp PDF coming in white

score 0 · Accepted Answer

Rogerio, I believe that this is what you were trying to do, I made the code as simple and intuitive so that you can understand what is happening, in each input I put the change function that detects changes in the element, In this function the values of the input's are summed and assigned to the total, finally the code is very self-explanatory. * obs: I put a table just for the same visualization 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><!DOCTYPEhtml><html><body><table><tr><td>Campo1</td><td>Campo2</td><td>Total</td></tr><tr><td><inputtype="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>