Calculation always active in Jquery

Asked

Viewed 228 times

0

I need the following:

I have 3 input fields for values/currency.
These values are not populated in sequence, other fields, with other values are populated between these 3 fields.
I need to know, how I do to make the result appear, from the calculation of these 3 fields, only when the 3 values are filled in, that is, leave the formula always "active", "on", so that at any time the result is displayed, as an Excel cell.
I hope the question is clear.

jquery html5

2 answers

1


You can use the .change to check when these fields are being allotted and just display the result in a div or a span when the 3 have some value.

Example:

$(function() {
  $("#one, #two, #three").change(function() {
    if ($("#one").val() != "" && $("#two").val() != "" && $("#three").val() != "") {
        total = parseInt($("#one").val()) + parseInt($("#two").val()) + parseInt($("#three").val());
      $("#resultado").text(total);
    }
  });
});
#resultado {
  border: 1px solid;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="one" placeholder="Campo 1" type="number">
<br>
<input id="two" placeholder="Campo 2" type="number">
<br>
<input id="three" placeholder="Campo 3" type="number">
<br>
<div id="resultado"></div>

  • Beauty @Erlon Charles, I’ll try

  • In parts it worked, however, the result appeared "0", zero. Is it because it is converting the values into int, parseint, and the values are 0.00

  • I cannot create more than one Function, as you suggested me to calculate other values in other formulas?

  • To get decimal places you use parseFloat()

  • Within the If that checks if there is content in the 3 inputs you can put whatever you want, any calculation or function

0

Thus:

HTML:

<input type="text" class="data_value">
<input type="text" class="data_value">
<input type="text" class="data_value">

<span id="result"></span>

jQuery:

$('.data_value').keyup(function() {
    calc()
});

function calc() {
   var sum = 0;
   $('.data_value').each(function() {
      if ($(this).val() != '') {
        $("#result").text(sum += +$(this).val())
      }
   });
}

JSFIDDLE EXAMPLE

  • He wants you to update ONLY when all 3 fields are filled

  • @Jefferson Alison, is that every input I have, has an id and in your example all are the same class. How can I adjust your code with my ids?

  • @Gustavosevero, I did this way to be dynamic. You can add as many input as you want. If you’re using the id, you can add the attribute normally to the input or you want it really to be with ID?

  • @Jeffersonalison, I usually use only id, but I can use both together in an input?

  • Another @Jeffersonalison thing, I need the input values to be with "," not "." you know? It’s supposed to be 1.11, for example and not 1.11. And in your example it only works if it’s 1.11. Yes, I understand that "," and JS is recognized as string, but then I need to convert from "," to ".". I tried to do it, but it didn’t work.

Browser other questions tagged jquery html5

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