Pass all checkboxes values as an array in Javascript

Question

I have the below checkboxes and I need to get them as an array values.

<input type="checkbox" id="contact_id" value="4" />
<input type="checkbox" id="contact_id" value="3" />
<input type="checkbox" id="contact_id" value="1" />
<input type="checkbox" id="contact_id" value="5" />

I need to pass them to one ajax request as array as below:

xmlHttp.open("POST","?action=contact&contact_id=" +contacts,true);

I am using this function to get the values but not able to pass them to the function as array, the passed like this 4,3,1,5. I need them to be passed like this

contact_id[]=4&contact_id[]=3&contact_id[]=1&contact_id[]=5

I have done this as follows

function getContacts(){
            var contacts = document.myform.contact_id, ids = [];
            for (var i = 0; i < contacts.length; i += 1){
                if (contacts[i].checked)
                     ids.push(contacts[i].value);
            }
            return ids;
        }

Answer 1

http://jsfiddle.net/xQezt/

Does this fiddle do what you want? The serialization is naive, but you could find a proper way to do that exact thing elsewhere or by using a framework like Zepto, jQuery or YUI.

First I made a way to "submit" the data. The output goes to the console, so open your firebug. Could go anywhere, though.

//submit event registration
submitButton.onclick = function () {
    var contactArray = inputsToArray(contacts.children);
    var data = serializeArray(contactArray, 'contact_id[]');
    console.log(data);
}

Then I made your method "getContacts" more generic:

function inputsToArray (inputs) {
    var arr = [];
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked)
            arr.push(inputs[i].value);
    }
    return arr;
}

Here is the naive serialization function. I do not expect this to work well in all cases, so you should do some research in where to get a good serialization algo from:

function serializeArray (array, name) {
    var serialized = '';
    for(var i = 0, j = array.length; i < j; i++) {
        if(i>0) serialized += '&';
        serialized += name + '=' + array[i];
    }
    return serialized;
}

I also slightly modified your HTML:

<div id="contacts">
<input type="checkbox" value="4" />
<input type="checkbox" value="3" />
<input type="checkbox" value="1" />
<input type="checkbox" value="5" />
</div>

<button id="submit">Submit</button>

Which let me query the DOM like this:

var d=document;
var submitButton = d.getElementById('submit');
var contacts = d.getElementById('contacts');

Answer 2

Your input's id are duplicate. so I recommend you to use name instead of id

For Example, Your HTML will look like this :

<form id='contactform'>
<input type="checkbox" name="contact[]" value="4" />
<input type="checkbox" name="contact[]" value="3" />
<input type="checkbox" name="contact[]" value="1" />
<input type="checkbox" name="contact[]" value="5" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Then if you want to get the value to querystring then use the JQuery Serialize

$('#contactform').serialize(); 
// this will take some thing like this, Example check the second and the fourth
// contact%5B%5D=3&contact%5B%5D=5 

jsFiddle : http://jsfiddle.net/Eqb7f/