How to create javascript array based on user input using jQuery

Question

I've dynamically loading check box fields, how can I send those to server based on user selection.

For example I've following doc,

<label>Set1</label>
<input type="checkbox" name="set_199[]" value="Apple" />
<input type="checkbox" name="set_199[]" value="Mango" />
<input type="checkbox" name="set_199[]" value="Grape" />
<label>Set2</label>
<input type="checkbox" name="set_200[]" value="Red" />
<input type="checkbox" name="set_200[]" value="Blue" />
<input type="checkbox" name="set_200[]" value="Orange" />

Suppose if user selected first two values for each of them, then I need to send like

response[0][0]=199; // Id
response[0][1]=['Apple','Mango']; //values
response[1][0]=200
response[1][1]=['Red','Blue'];

I've tried some approaches suggested in existing posts but failed to implement how I want.

• Farkhat Mikhalko: I think not <lable> -> <label>
• Arun P Johny: can you make some minor markup changes
• user2575725: which server scripting are u using?
• Mahesh.D: @ArunPJohny: Sure, please suggest.
• Mahesh.D: @Arvind: I using PHP, but I've problem in creating array of selected values with its id. Not in sending to server.

Answer 1

You can make some minor changes in the html then use .map()

<label class="set" data-id="199">Set1</label>
<input type="checkbox" name="set_199[]" value="Apple" />
<input type="checkbox" name="set_199[]" value="Mango" />
<input type="checkbox" name="set_199[]" value="Grape" />
<label class="set" data-id="200">Set2</label>
<input type="checkbox" name="set_200[]" value="Red" />
<input type="checkbox" name="set_200[]" value="Blue" />
<input type="checkbox" name="set_200[]" value="Orange" />

then

var array = $('.set').map(function () {
 var $this = $(this),
 id = $this.data('id'),
 array = [id];
 array.push($('input[name="set_' + id + '\\[\\]"]').filter(':checked').map(function () {
 return this.value;
 }).get())
 return [array]
}).get()

Demo: Fiddle

Answer 2

Yet another solution:

<lable>Set1</lable>
<input type="checkbox" name="set_199[]" value="Apple" />
<input type="checkbox" name="set_199[]" value="Mango" />
<input type="checkbox" name="set_199[]" value="Grape" />
<input type="button" value="check" class="js-submit">

Js:

$(".js-submit").on("click", function(){
 var a = $("input[type='checkbox']:checked");
 var values = {};
 a.each(function(){
 var value = $(this).val();
 var name = $(this).attr("name");
 if(!values[name]) values[name] = [];
 values[name].push(value)
 });
 console.log(values)
});

Demo

Answer 3

To expand on my comment a little, here's how I'd do this... given that you're sending this as an ajax request, I'd still wrap these elements in a form element, and use that as a starting-point to build the object we'll be sending...

var myForm = document.getElementById('formID').elements,//get all input nodes
data = {},temp;
for (var i=0;i<myForm.length;++i)
{
 temp = myForm.item(i).name.replace(/[[]]/g,'');//replace square brackets
 if (!data[temp])
 data[temp] = [];//create array if key does not exist
 if (myForm.item(i).checked)//for checkboxes
 data[temp].push(myForm.item(i).value);
}

That's the basic setup. If you want, you can add checks and further tailor this, so you can deal with various types of input fields, but in essence, it'll boil down to this.
You might also want to use Array.prototype.forEach on the myForm.elements NodeList, and use a callback to keep your code nice and clean.
Here's an example of a slightly more usable version of the same code:

btn.addEventListener('click', function()
{
 var data = {};
 Array.prototype.forEach.call(frm.elements, function(item)
 {
 var temp;
 if (item === btn) return;//don't includ the button element
 if (item.type === 'checkbox' && !item.checked ) return;//not checked, ignore
 if (item.name.match(/[[]]/))
 {
 temp = item.name.replace(/[[]]/g, '');
 if (!data[temp]) data[temp] = [];//if property does not exist, make an array
 data[temp].push(item.value);
 return;
 }
 //normal elements:
 data[item.name] = item.value;
 });
 //ajax request using data variable goes here!
 console.log(data);
},false);

And here's the fiddle of it

• Mahesh.D: I'm unable to workout on your solution, please don't mind. Once again thanks for your effort on my foolish question.

Answer 4

First of all thanks for all who have given answers to this question. I've derived my own solution for this issue but it is not possible without your help, especially this

 var checkBoxArray = {};
 $.each($("input[name^='set_'][type='checkbox']:checked"), function(i, item) {
 var Id = item.name.replace(/^(set_)|[\[\]]/g, "");
 var value = $(item).val(); 
 if(!checkBoxArray[Id]) 
 checkBoxArray[Id] = [];
 checkBoxArray[Id].push(value)
 }); 
 $.map(checkBoxArray, function(value, index) {
 reponse.push([index, value]);
 });

Its worked for me, suggest if anything not proper in above code snippet.

• Farkhat Mikhalko: You can use .map from EcmaScript 5))
• Mahesh.D: @FUserThrowError: Is it good in terms of performance than each ?