Looping over elements with values gives value is not defined

Question

Once page load is completed, I am looking for table cells which contain elements (number input fields) with an id of "check_status". I then loop over them (example simplified to a console.log).

Coffeescript

ready = ->
  $('td').find('#check_status').each (i, el) =>
    console.log el.val()
  return

$(document).ready(ready);
$(document).on('page:load', ready);

HTML

<td>
    <div>
        <input type="number" value="1" name="check[status]" id="check_status">
    </div>
</td>
<td>
    <div>
        <input type="number" value="0" name="check[status]" id="check_status">
    </div>
</td>
<td>
    <div>
        <input type="number" value="2" name="check[status]" id="check_status">
    </div>
</td>

Console.log of $('td').find('#check_status') gives me all the elements I am looking for, but console.log of el.val() gives "el is not defined". Why?

And `el` is DOM node, not jq object. Use `el.value` or `$(el).val();` or use `this` but not `el.val()`. — A. Wolff, Nov 22 '15 at 14:22
`"el is not defined"` Which browser gives you this error, because that's not the case. `el` is defined but `val` property isn't — A. Wolff, Nov 22 '15 at 14:25
Chrome. Thanks, I'd overlooked the unique IDs entirely. I'm using Rails and these duplicate IDs are because every input field is generated in a separate form_for. I will add some unique identifier to the IDs, then return to this. — Wilco van Esch, Nov 22 '15 at 14:32

score 0 · Answer 1 · answered Nov 22 '15 at 14:24

0

Id's should be unique. You should change id="check_status" to class="check_status" and the selection to find('.check_status').

answered Nov 22 '15 at 14:24

omer

26
2

That's true but that's not related to issue here – A. Wolff Nov 22 '15 at 14:24

score 0 · Answer 2 · answered Nov 22 '15 at 14:25

0

Have you tried the .each() with a function inside?
Like this:

$('td').find('#check_status').each (function (i, el){
  console.log (el.val())
});

answered Nov 22 '15 at 14:25

Bianca S.

84
4

Still `el` is a DOM node. FYI, OP is already using each loop, using coffescript syntax – A. Wolff Nov 22 '15 at 14:26
1

So, maybe, instead of `el` he could use `$(this).val()` – Bianca S. Nov 22 '15 at 14:33

score 0 · Accepted Answer · edited May 23 '17 at 12:07

0

The culprit ended up being this (snippet from Rails 4: how to use $(document).ready() with turbo-links):

$(document).ready(ready);
$(document).on('page:load', ready);

ready = ->
    ... function contents ...

Not quite sure why that made the each in the ready function fail, but it works fine when I instead use:

$(document).ready ->
    ... function contents ...

edited May 23 '17 at 12:07

Community

1
1

answered Nov 22 '15 at 16:58

Wilco van Esch

457
1
7
17

Looping over elements with values gives value is not defined

3 Answers3