Jquery value integer with id through loop

Question

I have a simple for loop:

for (var i = 0; i < 10; i++) {
    $('#input' + i).on('blur', function() {
        var values = $('#input' + i).val();
        console.log(values);
    });
}

I want to get the values of my #input, if I write something in my input I just get the message undefined in my console.

But Why if I run the following I get something correct ?

for (var i = 0; i < 10; i++) {
    $('#input' + i).on('blur', function() {
        var values = $('#input0').val();
        console.log(values);
    });
}

How do I put that values onto another id in that loop?

Bit hard to tell from the wording of the question - did you want *all* of the "values" (from all 10 inputs) or just the one being blur'd ? — freedomn-m, Jul 05 '16 at 10:49
Why not put a common class on all the elements and have a single event handler? — Rory McCrossan, Jul 05 '16 at 10:50
try to create string before selector. var id = '#input' + i; And then to $(id).val() — Rouz, Jul 05 '16 at 10:50
giving a common class.. bind event handler to it and use `this` to refer it — Pranav C Balan, Jul 05 '16 at 10:53

score 1 · Answer 1 · answered Jul 05 '16 at 10:51

1

The problem seems to be that are missing elements. You can remove the for() loop, jQuery makes all for you:

$('[id^="input"').on('blur', function() {
    var values = $(this).val();
    console.log(values);
});

With this mode you can render all inputs you need and jQuery will loop through all of them without creating listeners to inexistent elements.

answered Jul 05 '16 at 10:51

Marcos Pérez Gude

21,869
4
38
69

Missing elements wouldn't cause an event to fire for that missing element. – freedomn-m Jul 05 '16 at 10:53
To clarify, changing the selector is the way to go, but there's no issue with "missing elements" - adding an event to something that doesn't exist just means it won't ever fire. – freedomn-m Jul 05 '16 at 10:53
people still answer with _event inside for loop_, oh my god. +1 – elreeda Jul 05 '16 at 10:54
@John Adding an event inside a loop is not ideal, but not the cause of the issue to the *actual question*. – freedomn-m Jul 05 '16 at 10:58
@freedomn-m Im sure that you know this is the right answer, Marcos explain the problem and give better solution. – elreeda Jul 05 '16 at 11:00
@John the answer is correct, the explanation is not. It's nothing to do with "missing elements" which would not cause the problem in the question and could do with explaining the use of "this" to remove the need for a closure for the 'i' which is the actual problem and just ignored in this answer – freedomn-m Jul 05 '16 at 11:02
However, accepted answer is based in my answer. Accepted answer doesn't solve the `undefined` returned value problem. If the element is added dynamically should not return `undefined` first time. This question is ambiguous. – Marcos Pérez Gude Jul 05 '16 at 11:20

score 0 · Accepted Answer · edited Jul 05 '16 at 11:12

If you have really to use for loop try to separate the logic and you have to use event delegation .on() and use jQuery object $(this) inside the event because this object contain the current input blured :

for(var i = 0; i< 6; i++) {
  $('body').on('blur', '#input'+i, getValue);
}

function getValue() {
  var values = $(this).val();
  console.log(values);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='input0' value='0' />
<input id='input1' value='1' />
<input id='input2' value='2' />
<input id='input3' value='3' />
<input id='input4' value='4' />
<input id='input5' value='5' />

But it will be better if you could avoid the loop and add general class for all your inputs or use start-with selector ^=:

$("body").on('blur', '[id^='input']', function() {
    var values = $(this).val();
    console.log(values);
});

$('body').on('blur', '.input', function () {
  var values = $(this).val();
  console.log(values);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='input' id='input0' value='0' />
<input class='input' id='input1' value='1' />
<input class='input' id='input2' value='2' />
<input class='input' id='input3' value='3' />
<input class='input' id='input4' value='4' />
<input class='input' id='input5' value='5' />

score 0 · Answer 3 · answered Jul 05 '16 at 10:53

0

The blur event will happen sometime in future when you will blur from that specific input.

At that time the i value will be changed, since the loop has finished execution i has most recent value.

You need to create a closure and bind this i to the blur event

for (var i = 0; i < 10; i++) {
(function(i){
 $('#input' + i).on('blur', function() {
        var values = $('#input' + i).val();
        console.log(values);
    });
}(i))
}

JSFIDDLE

answered Jul 05 '16 at 10:53

brk

48,835
10
56
78

or you could just introduce a variable inside the loop: `var thisi = i; $("#input" + thisi)...` – freedomn-m Jul 05 '16 at 10:56

Jquery value integer with id through loop

3 Answers3