HTMLInputElement has no method 'val'

Question

I'm looping through cells in a table row. each cell has a text box in it, and I want to take the value of the text box and push it onto an array.

function dothing() {
        var tds = $('#'+selected+' td');
        var submitvals = new Array();
        tds.each(function(i) {
            var val = $(this).children('input')[0].val();
            submitvals.push(val);
        });
    }

Theres more to the function, but this is all that is relevant. For some reason, when I run this code, I get "HTMLInputElement has no method 'val'." I thought that input elements were supposed to have a val() method in jQuery that got the value so this makes no sense. Am I missing something, or doing it wrong?

Answer 1

val() is a jQuery method. .value is the DOM Element's property. Use [0].value or .eq(0).val()....

Answer 2

.val() is a jQuery function, not a javascript function. Therefore, change:

var val = $(this).children('input')[0].val()

To:

var val = $(this).children('input:eq(0)').val()

Answer 3

function dothing() {
    var tds = $('#'+selected+' td');
    var submitvals = new Array();
    tds.each(function(i) {
        var val = $($(this).children('input')[0]).val();
        submitvals.push(val);
    });
}

Answer 4

.val() is a jquery method. Using [0] returns the DOM element, not the jquery element

var val = $(this).children('input:first').val();