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?
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"
.map to get $(this).val() from each element, then Array.join to concatenate the values.To create an array of values you can do this:
var $inputValues = $('.activeInput')
.map((i, el) => el.val())
.toArray();
To create an object with keys and values you can do this:
var data = $('.activeInput')
.toArray()
.reduce((accumulator, element) => {
accumulator[element.name] = element.value;
return accumulator;
}, {});
this would already be a jQuery object in this context... You did miss a spot though.
el.val() should be $(el).val()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.
this.name is fine, but .val() works on <select> elements while this.value does not.<input> elements!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.
inputValues an array if you are treating it like an object? After your each the array still has a length of 0.
var inputValues = {}var inputValues = new String();. Here's an example: jsfiddle.net/5BkbQ Notice how you get the exact same results using new String, new RegExp, and new Array. This because they are all objects. Why store object-like values in an array? It makes no sense in this case. Just because it works doesn't mean you should do it.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/
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)
.val() only gets the value of the first input. (and this answer just so happens to have the exact same code as in the question which isn't working. )values.$(this).attr('name') won't work. values[$(this).attr('name')]
.val()only gets the value of the first input. Have you tried anything else?