jQuery if statement not working inside for loop

Question

Im having trouble figuring out what the problem is here. It doesnt work when i use '#account-funding-'+i in the IF statement but does work with '#account-funding-0'. I need to be able to loop through the array of unknown amount of objects. What am i doing wrong?

HTML * There can be X number of .funding-content div's on the page. Every ID with a -0 will increment from the js

<form id="accountform" name="accountForm">

 <div class="funding-content funding-selected-0">
   <div class="container">
    <h3>Funding for [account selected]</h3>

     <div class="funding-type-transfer" id="funding-type-transfer-0">

       <div class="form-inputs">
         <div class="lx-grid lx-grid--gutters">
           <div class="lx-grid__cell lx-grid__cell--1-2--above-md">
             <label for="account-funding-0">Routing Number</label>
             <input id="account-funding-0" type="text" maxlength="9">
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</form>

Doesnt Work:

var amountOfAccounts = $( '#account-form .funding-content' ).length;

for ( i = 0; i <= amountOfAccounts; i++ ) {

    if ( $( '#account-funding-'+i ).val() == '' ) {
        document.getElementById( 'account-funding-'+i ).setCustomValidity( 'Routing Number is a required field.' );
    }
}

Works:

var amountOfAccounts = $( '#account-form .funding-content' ).length;

for ( i = 0; i <= amountOfAccounts; i++ ) {

    if ( $( '#account-funding-0' ).val() == '' ) {
        document.getElementById( 'account-funding-'+i ).setCustomValidity( 'Routing Number is a required field.' );
    }
}

`'#account-funding-'+i` does result in `'#account-funding-0'` so I feel like this is starting to become an XY problem. What are you seeing that is not working? — Taplar, May 09 '18 at 17:21
It *should* work. With that said, it's possible that the page isn't fully loaded , which is causing errors. Hard to diagnose until you post the HTML — touch my body, May 09 '18 at 17:21
You'll have to show the HTML, but the thing that immediately jumps out is that you're doing `i = 0; i <= amountOfAccounts; i++`. Normally it would be `i = 0; i < amountOfAccounts; i++` or `i = 1; i <= amountOfAccounts; i++`. If you use `val` on an empty jQuery set, you'll get the value `undefined`. (Whether that's a problem depends a lot on `do something`.) — T.J. Crowder, May 09 '18 at 17:22
Having a series of `id`s like that is an anti-pattern though. Just loop through the jQuery set returned by `$("#account-form .funding-content")`. — T.J. Crowder, May 09 '18 at 17:23
try to define a new string before comparison, `let x = '#account-funding-'+i` then `if ( $(x).val() == '' )` — Zeyad Etman, May 09 '18 at 17:24
It's quite hard to say what's wrong. However, my gut feeling is it's [the old closures inside loop chestnut](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — VLAZ, May 09 '18 at 17:25
The code works fine. The error is somewhere else. https://jsfiddle.net/n803tc8x/ — NoobishPro, May 09 '18 at 17:26
@T.J.Crowder...thank you for your advise. It looks like it was something as simple as changing <= to — moudstar, May 09 '18 at 17:57

score 3 · Answer 1 · answered May 09 '18 at 17:27

Obviously, the index is not matching an element somewhere. But, you don't need to do it like this. JQuery provides an .each() method to loop through the objects so you don't have to worry about any of that:

$( '#account-form .funding-content' ).each(function(index, element){
   if(element.val() !== ""){
      // Do something
   }
});

score 0 · Accepted Answer · answered May 09 '18 at 17:25

If I understood correctly, you aren't getting the right id in the loop? if Yes, set your loop variable to be created as a let, so it is not hoisted and is block scope, for this loop.

Also, to loop through correct number of elements, use < instead of <=.

See if this helps you. (or maybe I understood it completely wrong, if so, I can made some adjustment or delete this answer)

var amountOfAccounts = $('#account-form .funding-content').length;

for (let i = 0; i < amountOfAccounts; i++ ) {
    var elemValue = $( '#account-funding-'+i ).val();
    if ( elemValue == '' || elemValue == null) {
        console.log('empty value');
    }else{
        console.log(elemValue);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="account-form">
 <input value="abc" class='funding-content' id="account-funding-0">
  <input value="" class='funding-content' id="account-funding-1">
 <input value="def" class='funding-content' id="account-funding-2">
 <input value="" class='funding-content' id="account-funding-3">
</div>

Thank you. Your answer along with @T.J Crowder ended up fixing the issue. I just needed to change <= to — moudstar, May 09 '18 at 18:01

jQuery if statement not working inside for loop

2 Answers2