65

I have a form where users can add input fields with jQuery.

<input type="text" id="task" name="task[]" />

After submitting the form I get an array in PHP.

I want to handle this with the $.ajax() but I have no idea how to turn my <input>s to an array in jQuery.

starball
  • 20,030
  • 7
  • 43
  • 238
x4tje
  • 1,633
  • 1
  • 15
  • 17

9 Answers9

124

Using map:

var values = $("input[id='task']")
              .map(function(){return $(this).val();}).get();

If you change or remove the id (which should be unique), you may also use the selector $("input[name='task\\[\\]']")

Working example: http://jsbin.com/ixeze3

Kobi
  • 135,331
  • 41
  • 252
  • 292
  • this is working good with the 1,2,3 so i'll use this with the explode function of php to get it sorted thanks @all for helping – x4tje Apr 13 '10 at 08:10
  • 1
    @x4tje - no problem. You don't have to use explode - note that `values` is an array, not a string. It depends on how you do your AJAX call, or course. – Kobi Apr 13 '10 at 08:12
  • why do we need `.get()` for? – imdahmd Mar 27 '13 at 08:55
  • 1
    The .get() flattens the array of values into a string. If you did want the actual Javascript array of values, you should remove the ".get()". – orrd Apr 30 '13 at 22:46
  • 1
    @orrd - `$(...)` returns an array-like jQuery wrapper. [`$(...).get()`](http://api.jquery.com/get/) returns a real array of real DOM nodes, not a string. – Kobi May 01 '13 at 04:55
  • how can I do if I want to add for each element of the array, each index [n], another value? Example: – GabAntonelli Dec 29 '13 at 09:47
  • @Gabz - I'd target their container, something like `$('.row').map(function(){var row = $(this); return {name: row.find('.name').val(), surname: row.find('.surname').val()};}).get();`, which results in an array of objects, not just values. Feel free to [ask a new question](http://stackoverflow.com/questions/ask) with your code if you need additional help. Thanks! – Kobi Dec 29 '13 at 10:04
  • I can't make it work :( thanks anyway, I'll post a new question – GabAntonelli Dec 29 '13 at 10:24
  • it works thanks! I forgot to change the function to alert the content of the array on the screen and it was blocking all the code when submitting! – GabAntonelli Dec 29 '13 at 10:34
  • Be careful with .map(), in some browsers it returns an array but in others it returns an object `m.fn.init[]` (Chrome). This latter one cannot be stringified by JSON.stringify(). Specifically, the following two are NOT equivalent: `var arr=$('input[name="foo"]').map(function(){return this.value}).get()` with `var arr=[]; $('input[name="foo"]').each(function(){arr.push(this.value)})`. In the first case `arr` is not an Array whereas in the latter case it is. `JSON.stringify(arr)` fails for the former, but works for the latter. – Normadize Apr 08 '15 at 16:14
  • you are genius .. I have do this for select box. – Amit Bera Jan 08 '16 at 06:15
35

For multiple elements, you should give it a class rather than id eg:

<input type="text" class="task" name="task[]" />

Now you can get those using jquery something like this:

$('.task').each(function(){
   alert($(this).val());
});
Sarfraz
  • 377,238
  • 77
  • 533
  • 578
17

Firstly, you shouldn't have multiple elements with the same ID on a page - ID should be unique.

You could just remove the id attribute and and replace it with:

<input type='text' name='task'>

and to get an array of the values of task do

var taskArray = new Array();
$("input[name=task]").each(function() {
   taskArray.push($(this).val());
});
Dal Hundal
  • 3,234
  • 16
  • 21
10

To catch the names array, i use that:

$("input[name*='task']")
fxs
  • 173
  • 4
  • 9
9

You can't use same id for multiple elements in a document. Keep the ids different and name same for the elements.

<input type="text" id="task1" name="task" />
<input type="text" id="task2" name="task" />
<input type="text" id="task3" name="task" />
<input type="text" id="task4" name="task" />
<input type="text" id="task5" name="task" />

var newArray = new Array();

$("input:text[name=task]").each(function(){
    newArray.push($(this));
});
Emilio Gort
  • 3,475
  • 3
  • 29
  • 44
rahul
  • 184,426
  • 49
  • 232
  • 263
  • 2
    @rahul: that won't do because he is dealing with multiple text boxes not one. If you know PHP, notice the name of the text box `task[]` which means there are supposed to be more than one text boxes. – Sarfraz Apr 13 '10 at 07:52
  • 2
    @rahul: your update won't help still in terms of making php array which can be done if the `[]` is suffixed with the name of the field. – Sarfraz Apr 13 '10 at 07:56
1

HTML:

<input type="text" name="task[]" class="form-control" id="task">

JS:

var tasks= new Array();
$('input[name^="task"]').each(function() 
{
tasks.push($(this).val());
});
Antonio Reyes
  • 516
  • 4
  • 7
0

if you want selector get the same id, use：

$("[id=task]:eq(0)").val();
$("[id=task]:eq(1)").val();
etc...
wade
  • 21
  • 2
0

You can use jquery.serializeJSON to do this.

Nikola Obreshkov
  • 1,698
  • 4
  • 21
  • 32
0

Q:How to access name array text field 

<input type="text" id="task" name="task[]" />

Answer - Using Input name array :

$('input[name="task\\[\\]"]').eq(0).val()
$('input[name="task\\[\\]"]').eq(index).val()
suraj kakade
  • 1
  • 3