Javascript/JQuery save form fields in array

Question

I have a from with several text inputs as follows:

<input name="option[][<?php echo $cmd1; ?>]" type="text">
<input name="option[][<?php echo $cmd2; ?>]" type="text">
<input name="option[][<?php echo $cmd3; ?>]" type="text">
<input name="option[][<?php echo $cmd4; ?>]" type="text">
[..]

There is an undefined amount of inputs, each time.

When the form is submitted I want to save the value of "option[]" into a javascript array (I am using AJAX so the state of the array will not get deleted).

I have tried to achieve this with $('form').serializeArray() in my AJAX request, but I am not sure how I can access only the "option[]" data.

Any suggestions would be greatly appreciated!

what result to you expect? an array containing all inputs' (with name option) values? — Michał Rybak
– Michał Rybak, Commented Nov 10, 2013 at 11:34

David Thomas · Accepted Answer · 2013-11-10 18:27:18Z

1

While you've already accepted an answer, it's worth pointing out that (assuming you perform this action at the appropriate time, or following the appropriate event) this can be done in two relatively simple ways.

With jQuery:

var options = $('input[name^="option"]').map(function(){ return this.value; }).get();

Or with plain JavaScript (modern browser):

var options = [].map.call[document.querySelectorAll('input[name^="option"]'), function(a){
    return this.value;
});

answered Nov 10, 2013 at 18:27

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

Comments

user2511140 · Accepted Answer · 2013-11-10 11:33:56Z

0

Use .push()
.push() is a function that adds an element on the end of the array and expands the array respectively. http://learn.jquery.com/javascript-101/arrays/

var myarray = []; //  new Array()
myarray.push($("#inputid").val());

to push all input value (in your form) to array

var myarray = [];
$('#form').find(':input').each(function(){
  myarray.push($(this).val());
});

edited Nov 10, 2013 at 11:33

answered Nov 10, 2013 at 11:28

user2511140

1,6943 gold badges26 silver badges32 bronze badges

2 Comments

Ronny vdb Over a year ago

Thanks for the suggestion but as I said in my question, I have an undefined amount of inputs so I cannot assign them IDs

Ryan Williams Over a year ago

@Ronnyvdb The two code samples are independent. The second one will get any input inside the #form element and push their values into an array. Give your form an ID of form and it should work.

Rohan Kumar · Accepted Answer · 2013-11-10 11:17:35Z

0

What if your HTML is option[<?php echo $cmd1; ?>] instead of option[][<?php echo $cmd1; ?>] like,

<input name="option[<?php echo $cmd1; ?>]" type="text">
<input name="option[<?php echo $cmd2; ?>]" type="text">
<input name="option[<?php echo $cmd3; ?>]" type="text">
<input name="option[<?php echo $cmd4; ?>]" type="text">

answered Nov 10, 2013 at 11:17

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

1 Comment

Ronny vdb Over a year ago

Hi, I have change the code to what you suggested, now how can I access the option array when the form is submitted?

Michał Rybak · Accepted Answer · 2013-11-10 11:38:52Z

0

Just use classes, like this:

<input class="option" name="option[<?php echo $cmd1; ?>]" type="text">
<input class="option" name="option[<?php echo $cmd2; ?>]" type="text">

var options = [];
$('.option').each(function(){
  options.push($(this).val());
});

Or match by name attribute directly:

<input name="option[<?php echo $cmd1; ?>]" type="text">
<input name="option[<?php echo $cmd2; ?>]" type="text">

var options = [];
$("input[name*='option']").each(function(){
  options.push($(this).val());
});

answered Nov 10, 2013 at 11:38

Michał Rybak

8,7063 gold badges44 silver badges55 bronze badges

Collectives™ on Stack Overflow

Javascript/JQuery save form fields in array

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related