Question

TO CLARIFY I’VE GOT THE VALUES OF THE CHECKED CHECKBOXES. I NEED TO ORGANIZE THEM IN AN ARRAY SIMILAR TO THE PHP EXAMPLE GIVEN. THANKS

I’m trying to build an array of checked checkboxes to be sent over AJAX for processing by PHP. Originally I got the selected checkboxes by PHP but I’m having trouble converting this process to Javascript.

There are three different groups of checkboxes (‘first’, ‘second’, ‘third’) and for each of these groups there are 4 different checkboxes that can be checked.

The html of the checkboxes followings the same pattern up to value 4.

<input type="checkbox" name="first" class="selection first"  value="1"  />
<input type="checkbox" name="second" class="selection second" value="1"  />
<input type="checkbox" name="third" class="selection third" value="1"  />
<input type="checkbox" name="first" class="selection first"  value="2"  />
<input type="checkbox" name="second" class="selection second" value="2"  />
<input type="checkbox" name="third" class="selection third" value="2"  />

and so on….

The PHP code would return an array of the checked checkboxes like such.

$selections => array(
['first'] => array(
[0] => 1,
[1] => 3,
[2] => 4),
['second'] => array(
[0] => 2),
['third'] => array(
[0] => 1,
[1] => 4)
);

I’ve been trying and trying to replicate this in JavaScript but I keep getting errors such as cannot convert undefined to object and the likes. I loop the available positions to create arrays, then loop all the checkboxes and if checked, I get the value.

console.log() prints the position (‘first’, ‘second’ or ‘third’) and the number of the selection (1 – 4). That’s all I need, but how do I put this in an array similar to the PHP one?

function getSelections() {

var selections = new Array();

$('.position').each(function() {
    selections[$(this).attr('value')] = new Array;
});

$('.selection').each(function() {
    if( $(this).prop('checked') == true ) {
        position = $(this).attr('name');
        selection = $(this).attr('value');

        console.log(position + ' - ' + selection);
    }
});
return selections;

}

It’s to be sent to a PHP script as JSON and I need to decode it as an array like the PHP one.

Answer 1

Nothing fancy needed…. change to this and view the posted arrays.

<input type="checkbox" name="first[]" class="selection first"  value="1"  />
<input type="checkbox" name="second[]" class="selection second" value="1"  />
<input type="checkbox" name="third[]" class="selection third" value="1"  />
<input type="checkbox" name="first[]" class="selection first"  value="2"  />
<input type="checkbox" name="second[]" class="selection second" value="2"  />
<input type="checkbox" name="third[]" class="selection third" value="2"  />

Then serialize this as normal to submit via ajax instead.