How do I get an array from inputs in JQUERY?

Question

I have a group of inputs to get player info:

<select name="playerSport" class="playerSport">...</select>
<input type="text" name="playerPosition" class="playerPosition" />
<input type="text" name="playerNumber" class="playerNumber" />
<button id="submit">Submit</submit>

There can be n number of each field. I'm using AJAX with this form so I want to pull each field into an array. Have an array for each sport, position, and number.

i've reviewed the examples from these pages: jquery.val() and jquery.map()

i've tried:

var sport = $('input[name="playerSport"').val() || [];
var sportList = sport.join(",");

var sport = $('.playerSport').val() || [];
var sportList = sport.join(",");

$('input[name="playerSport"').map().get().join(",");

$('.playerSport').map().get().join(",");

these return blank results. Odds are I'm missing something fairly obvious. Any ideas?

$('.playerSport').val() these will return you only one value and not an array then how can you do .join ??? — jimy
– jimy, Commented Apr 19, 2011 at 15:21
This is probably not the main problem, but you are missing closing brackets on $('input[name="playerSport"') it should be $('input[name="playerSport"]') that is on the 1st line and the 7th line — chromedude
– chromedude, Commented Apr 19, 2011 at 15:24

jessegavin · Accepted Answer · 2011-04-19 15:27:23Z

1

var a = $.map($(".playerSport,.playerPosition,.playerNumber"), function(el) {
 return $(el).val();
});
// now 'a' is an array containing the values.

edited Apr 19, 2011 at 15:27

answered Apr 19, 2011 at 15:20

jessegavin

75.8k28 gold badges141 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dcp3450 Over a year ago

ah! I HAVE to do the return. Cool, that did it. I'll select this as the answer once the time runs out. thanks!

sharat87 Over a year ago

could do the same thing also as $("...").map(function (el) {...}

Mark Coleman · Accepted Answer · 2011-04-19 15:26:19Z

1

Another option is to pass a function into .val()

var values = [];
$(":input").val(function(index, value){
    values.push(value);
});

Also you can use :input if you want to select all <select/>, <input type="text"/>, and <textarea/> elements.

Code example on jsfiddle

answered Apr 19, 2011 at 15:26

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

1 Comment

sharat87 Over a year ago

You are abusing the .val function. Use .map for this. .val is intended to set the value for each element to the return value of the function.

Lightness Races in Orbit · Accepted Answer · 2011-04-19 15:49:44Z

0

.val() will return an array for an element with multiple values (like a multi-<select>), but it does not return an array of values from each element in the selected node set.

You'll need to build up an array in a callback function, possibly using $.map.

answered Apr 19, 2011 at 15:49

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

Collectives™ on Stack Overflow

How do I get an array from inputs in JQUERY?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related