How to get an Array with jQuery, multiple <input> with the same name

Question

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.

Answer 1

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

• x4tje: 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
• Kobi: @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.
• imdahmd: why do we need .get() for?
• orrd: 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()".
• Kobi: @orrd - $(...) returns an array-like jQuery wrapper. $(...).get() returns a real array of real DOM nodes, not a string.

Answer 2

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());
});

• Freddy Sidauruk: @Sarfraz please check it codepen.io/sidaurukfreddy/pen/XNroJW how can i prevent if kode barang has same value ? thanks

Answer 3

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());
});

Answer 4

To catch the names array, i use that:

$("input[name*='task']")

• tmarois: This is actually the best answer here.

Answer 5

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));
});

• Sarfraz: @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: @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.

Answer 6

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());
});

Answer 7

if you want selector get the same id, use:

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

Answer 8

You can use jquery.serializeJSON to do this.

Answer 9

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()