Get value of variable inside .each() function jQuery

Question

I have code below.

The code works fine, but if I uncomment the "if" statement, alert will show up as soon as I enter something to input field.

I want the "sum" value to be checked (alert shows up) only after I entered all 3 input fields.

Please help me to fix it. Thanks.

<apex:inputField styleClass="Weight" value="{!EvaluationInformation__c.val1__c}" />
<apex:inputField styleClass="Weight" value="{!EvaluationInformation__c.val2__c}" />
<apex:inputField styleClass="Weight" value="{!EvaluationInformation__c.val3__c}" />

$(document).ready(function() {
  $(document).on("input", ".Weight", function(e) {
    var sum = 0;
    $('.Weight').each(function() {
      var num = $(this).val();
      if (num != null && !isNaN(num)) {
        sum += parseFloat(num);
      } else {
        alert("Accept number only");
      }
    });

    //if (sum != 1){ // sum !=1 doesn't work
    //  alert("The total of Weight must be 1");
    //} 
  });
});

The code seems fine. What debugging have you done? Have you checked the console for errors? What is the value of sum after the loop runs? We can't really help you without knowing these details. It would also help to see the HTML output, not the visualforce template, as it's not relevant to the issue. — Rory McCrossan
– Rory McCrossan, Commented Jan 27, 2021 at 9:16
Working code check this only change i have made in if statement you can check num !="" else working fine. ( check console for result ) — Swati
– Swati, Commented Jan 27, 2021 at 9:22
Alert shows up everytime i enter value to input fields that i dont want — hideo
– hideo, Commented Jan 27, 2021 at 9:53
Maybe you should change your event listener to change, as otherwise you will be interrupted after each time you press a key. — Carsten Massmann
– Carsten Massmann, Commented Jan 27, 2021 at 10:04

Peter B · Accepted Answer · 2021-01-27 11:23:16Z

1

You can use a status flag that will tell if all inputs are valid, see my example code below.

Also, AFAIK val() for an <input> element never returns null, it returns "" if there is no input. This is why I used if (num && ... instead, which in this situation means "only proceed if num contains text".

$(document).ready(function() {
  $(document).on("change", ".Weight", function(e) {
    var sum = 0;
    var allInputsValid = true; // <-- flag variable
    $('.Weight').each(function() {
      var num = $(this).val();
      if (num && !isNaN(num)) {
        sum += parseFloat(num);
      } else {
        allInputsValid = false;
      }
    });
    if (allInputsValid) {
      console.log("All inputs have numbers.");
      if (sum != 1) {
        console.log("The total of Weight must be 1, but it is: " + sum);
      } else {
        console.log("The total of Weight is 1.");
      }
    } else {
      console.log("Not all input have numbers yet.");
    }
  });
});

.Weight { width: 50px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
#1: <input class="Weight" /> #2: <input class="Weight" /> #3: <input class="Weight" />

PS - Even then, you may have trouble making this work because of how Floating Point math works. Due to internal rounding, a sum of numbers that you would expect to be 1 will not always produce exactly 1:

var x = parseFloat("0.34") + parseFloat("0.56") + parseFloat("0.10");
console.log(x);
console.log(x === 1);

edited Jan 27, 2021 at 11:23

answered Jan 27, 2021 at 10:04

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hideo Over a year ago

Sorry for my bad description . I have fixed it , thank you

Collectives™ on Stack Overflow

Get value of variable inside .each() function jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related