Why is .val() not a function?

Question

I have a dynamic form where the user provides a name and description:

<label>Name</label><br />
<input type="text" name="name[]" maxlength="255" /><br />

<label>Description</label><br />
<textarea name="desc[]"></textarea><br />

I am trying to validate the form with Javascript to ensure that if the name is specified, then a description must be entered.

$("input[name='name[]']").each(function() {
    var index = $("input[name='name[]']").index(this);
    if ($(this).val() != '') {
        alert($("textarea[name='desc[]']").get(index).value);
        alert($("textarea[name='desc[]']").get(index).val());
    }
}

The first alert() works as expected however with the second alert I get: $("textarea[name='desc[]']").get(index).val() is not a function

What is the difference? Why can't I use the jQuery function?

Answer 1

Because

$("textarea[name='desc[]']").get(index);

is DOM object, not jquery. It has not method val. Use

$("textarea[name='desc[]']:eq(" + index + ")").val();

for textarea value.

Answer 2

Use eq(index) instead of get(index) and it will return a jQuery object. The jQuery object will have a val() method that should work as expected for a textarea.

val() documentation

A value is returned for all input elements, including selects and textareas. For multiple selects an array of values is returned.

Example:

$("input[name='name[]']").each(function() {
    var index = $("input[name='name[]']").index(this);
    if ($(this).val() != '') {
        alert($("textarea[name='desc[]']").eq(index).val());
    }
});