How to retrieve value from elements in array using jQuery?

Question

I have multiple input fields like so:

<input type="text" name="card[]">
<input type="text" name="card[]">
<input type="text" name="card[]">

Users can add or remove these fields as required, therefore the name of the fields is an array. To get length of the array, this works fine:

var n = $("input[name^= 'card']").length;

How can I read value from the array?

I've tried this which didn't work:

var n = $("input[name^='card']").length;
var array = $("input[name^='card']");
for(i=0;i<n;i++)
{
 card_value=  array[i].val();
 alert(card_value);
}

This didn't work either:

var n = $("input[name^='card']").length;

for(i=0;i<n;i++)
{
 card_value=  $("input[name^='card["+i+"]']").val();
 alert(card_value);
}

How can I read value from this array? Help!

Answer 1

Use map function

var values = $("input[name^='card']").map(function (idx, ele) {
   return $(ele).val();
}).get();

Answer 2

You should use:

card_value=  array.eq(i).val(); //gets jquery object at index i

or

card_value=  array[i].value; //gets dom element at index i