19

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!

Improve this question
2
  • Elaborate a little please, what value do you want to read, the value the user actually inputs within the input? And what do you want to retrieve, all of them? Commented Aug 30, 2012 at 22:48
  • try $(input.attr("[name^='card'])").length; Commented Aug 30, 2012 at 22:48

7 Answers 7

Reset to default
23

Use map function

var values = $("input[name^='card']").map(function (idx, ele) {
   return $(ele).val();
}).get();
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Hint: you can also use $(this) within the function and drop parameters idx and ele. And .get() is for extracting a real array from the jQuery object that gets returned by .map().
thanks for @Robsch 's comment, the .get is important indeed, .map returned result is not a javascript array.
15

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
Improve this answer

2 Comments

@scrappedcola how can i prevent same value ?
@FreddySidauruk what do you mean "prevent same value"? That's not related to the question I was answering. Generally one would use an if block to check value vs what's in array. if you have a question search the site for relevant questions and if you don't find one create your own question.
8

jQuery collections have a built in iterator with .each:

$("input[name^='card']").each(function () {
   console.log($(this).val());
}
Improve this answer

Comments

1

to read an array, you can also utilize "each" method of jQuery:

$.each($("input[name^='card']"), function(index, val){
    console.log(index + " : " + val);
});

bonus: you can also read objects through this method.

source

Improve this answer

Comments

0

Use: http://jsfiddle.net/xH79d/

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

for(i=0; i < n; i++) {

   // use .eq() within a jQuery object to navigate it by Index

   card_value = array.eq(i).attr('name'); // I'm assuming you wanted -name-
   // otherwise it'd be .eq(i).val(); (if you wanted the text value)
   alert(card_value);
}

​

Improve this answer

Comments

0

You can just loop though the items:

$("input[name^='card']").each(function() {
    console.log($(this).val());
});
Improve this answer

Comments

0

Your syntax is incorrect.

card_value = $(array[i]).val(); or card_value = array[i].value;

array[i] is not a jQuery object (for some reason).

Checking your browser's console can be helpful for things like this.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.