jQuery get values from inputs and create an array

Question

I have many inputs on a page. I want to create an associative array with each input's name and value using jQuery. I've tried:

<input class="activeInput" type="text" name="key1" value="red">
<input class="activeInput" type="text" name="key3" value="France">

inputValues = $('.activeInput').val();

EDIT - Thanks to the insightful comments, it seems maybe creating an object is a better way to go. Any suggestions on how to create an object instead?

Answer 1

By running them through a loop you can create an object with string accessible values. Javascript doesn't have the concept of an associative array, but using bracket syntax you can access properties on an object in much the same way an associative array works in PHP.

var values = {};
$('.activeInput').each(function() {
    values[this.name] = this.value;
});

console.log(values['key1'], values['key3']);
// Note, this is the same as above.
console.log(values.key1, values.key3);

In your console you should see: red France

Here is a JsFiddle http://jsfiddle.net/rEtVt/ for it.

This is also referred to as a hashmap (concept) used for quick lookups.

Answer 2

If you need to serialize form for ajax submission then you should have a look at serialize and serializeArray jQuery methods. Special cases may occur when you have many inputs with the same name attribute that have to make array on the server.

Otherwise, I would call jquery serializeArray on the form element and iterate over its results to convert it into object.

UPD: added example http://jsfiddle.net/zQNUW/

Answer 3

var inputValues = new Array();
$('input').each(function(){
    inputValues[$(this).attr('name')] = $(this).val();
});

That is assuming, of course, that you want the value of all inputs.

---

That being said, many reasons not to use and Array have been brought to my attention.

Answer 4

Try this:

var values = new Object() // creates a new instance of an object
$('.activeInput').each(function() {
    values[$(this).attr('name')] = $(this).val()
})

To check the object properties:

output = ""
for (property in values) {
  output += property + ': ' + values[property]+'; ';
}
alert(output)

Answer 5

I'm aware this question is four years old, and the accepted answer does suffice. Nevertheless I'd like to contribute an answer for the sake of completion, since this question is the first search result on Google.

jQuery has a map function as of version 1.2 (released in 2007). One could do something as simple as the following (this is not a cross-browser solution):

var $inputValues = $('.activeInput').map((i, el) => el.val());

Though nobody should ever use arrow functions in JavaScript, they are not supported in IE or Safari. The following is a cross-browser solution:

var $inputValues = $('.activeInput').map(function() {
    return $(this).val();
});

It is important to note that the return value is not a native array. This might cause problems when one would attempt to use methods which exist in Array.prototype. To convert the result to an array, one might do the following:

var inputValues = $('.activeInput').map(function() {
    return $(this).val();
}).toArray();

Answer 6

You can use .each() to iterate over the elements and add the names and values to a map (a plain object) like this:

var map = {};
$(".activeInput").each(function() {
    map[$(this).attr("name")] = $(this).val();
});

alert(map.key1); // "red"

See it in action.