Reputation: 18690
I have the following HTML:
<input type="text" name="inp1" id="inp1" />
<input type="text" name="inp2" id="inp2" />
<input type="text" name="inp3" id="inp3" />
<input type="submit" value="Send" id="clickMe" />
Each time I click on the submit button I should add the values of each inp*
to an array so I end up with something like this:
[
['inp1' => val1, 'inp2' => val2, 'inp3' => val3],
['inp1' => val10, 'inp2' => val20, 'inp3' => val30],
['inp1' => val11, 'inp2' => val21, 'inp3' => val31],
['inp1' => val12, 'inp2' => val22, 'inp3' => val32]
]
After reading this article I think I could do the following:
var obj = {};
var item = [];
$('#clickMe').click(function() {
item.push(
$('#inp1').val(),
$('#inp2').val(),
$('#inp3').val()
);
});
But the solution above will end up with a lineal array and not what I want (example here on Fiddle). I have read here and here but I am getting confused.
Also I shouldn't have repeated elements so this:
[
['inp1' => val1, 'inp2' => val2, 'inp3' => val3],
['inp1' => val1, 'inp2' => val2, 'inp3' => val3]
]
Is invalid. So, how is the right way to deal with this and get a multidimensional array?. Can any give me some help and leave an example so I can get this?
EDIT: As suggested the code should be compatible with most of the browser out there and as for IE should be IE9+
Upvotes: 0
Views: 439
Reputation: 351403
You could maintain a Set
, which is more designed for this purpose than using object properties:
var list = new Set(); // helper object to avoid duplicates
var items = []; // the real 2D array
$('#clickMe').click(function() {
var item = [
$('#inp1').val(),
$('#inp2').val(),
$('#inp3').val()
];
var key = JSON.stringify(item);
if (list.has(key)) return; // skip
list.add(key);
items.push(item);
return false; // to avoid that the form submits.
});
If you have many more input
elements, it might be worth it to get their values via a loop:
var item = $('form input[type=text]').map(function () {
return $(this).val();
}).get();
... then Sets are not an option. Use a plain object instead:
var list = {}; // helper object to avoid duplicates
var items = []; // the real 2D array
$('#clickMe').click(function() {
var item = [
$('#inp1').val(),
$('#inp2').val(),
$('#inp3').val()
];
var key = JSON.stringify(item);
if (list[key] === 1) return; // skip
list[key] = 1;
items.push(item);
return false; // to avoid that the form submits.
});
Upvotes: 1
Reputation: 7232
You can try to wrap up a JavaScript Object for each key value pair (attributes of the input fields) then push
each object into an array. The following example might help:
var item = [];
$('#clickMe').click(function() {
var val1 = $('#inp1').val();
var val2 = $('#inp2').val();
var val3 = $('#inp3').val();
var obj = {
inp1: val1,
inp2: val2,
inp3: val3
};
item.push(obj);
});
//your code for AJAX goes here
I hope this helps.
Upvotes: 0
Reputation: 4479
There is no such concept of an associative array in JavaScript. You should be hydrating an object and then sending that as an XMLHttpRequest either by form-encoding or JSON-encoding the object.
$('#clickMe').click(function() {
var obj = {};
obj[ $('#inp1').attr('name') ] = $('#inp1').val();
obj[ $('#inp2').attr('name') ] = $('#inp2').val();
obj[ $('#inp3').attr('name') ] = $('#inp3').val();
console.log(obj) // see desired data-structure
console.log(obj.inp1); // get inp1 val
console.log(obj['inp1']); // get inp1 val again
});
This example would also be better if you could loop on the input elements with something like:
var elms = $('form input');
var obj = {};
for ( var i = 0; i < elms.length; i++ )
{
obj[ $(elms[i]).attr('name') ] = $(elms[i]).val();
}
Upvotes: 0
Reputation: 3035
To create the equivalent of an associative array in Javascript, you need an object. The object properties act like array keys would in a language like PHP. For example:
var myObject = {
a: [1,2,3],
b: [4,5,6],
c: {
cat:"Fluffy",
dog:"Fido"
}
};
Here the properties a
and b
contain arrays, and the property c
contains another object.
Upvotes: 0
Reputation: 406
JSON.stringify(AssocArray);
Create Json string to send over AJAX request.
Or do $("form").serialize() . To know more about this method you can check http://api.jquery.com/serialize/
Upvotes: 0