Getting and using values obtained from multiple text boxes via JQuery

Question

I'm trying to get the values from multiple textboxes using JQuery.

I'm a bit of a newbie with Javascript in general. I have a form with the following input element:

<input name="milkman" value="jessie"/>
<input name="letterman2" value="jim" />
<input name="newmilk" />

I get the values of the first two input elements using:

var test_arr = $("input[name*='man']").val();

How do I get at the individual textbox values? When I use the alert() function to echo the value of test_arr, all I see is the first element's value.

Kindly assist.

Answer 1

Your sample is only returning the value in the first item in the array. You need to iterate through the array, and you can use the each. The jQuery selector syntax returns a jQuery object that contains matched objects as an array.

You can use the other variation of $.each, too, like so...

var test_arr = $("input[name*='man']");
$.each(test_arr, function(i, item) {  //i=index, item=element in array
    alert($(item).val());
});

Since the jQuery object that's returned is an array of matched elements, you can also use a traditional for loop...

//you can also use a traditional for loop
for(var i=0;i<test_arr.length;i++) {
    alert($(test_arr[i]).val());
}