Question

How to get an array of all checkboxes selected on the page, and then passing it to the next page (in this case php, so it can be picked up by php _POST function). I have come up with this :

<script type="text/javascript">
var selected = new Array();

$(document).ready(function() {

  $("input:checkbox:checked").each(function() {
       selected.push($(this).val());
  });
$('#od').submit(function() {
  alert(this.selected); // *See note below
  $.post('receiver.php', {'registration': selected});
  return false;
});

});

</script>

But is does not seem to work 🙁 It returns null, as if no checkboxes would have been added to the array, or maybe the post function is wrong. Can you point me in the right direction here?

Answer 1

I’ve found the following of issues:

1. You read the checked items on page load, thus ignoring all changes made by the user. Move that code to the submit() handler.

2. Your debugging code (alert(this.selected)) tries to display the value of the selected property for the form node. It isn’t a reference to your JavaScript global variable selected. I suggest you use a proper debugging tool such as Firebug; alerts are highly unsuitable.

3. You sucessfully send the values of checked items. You just ignore the field name and rename everything to registration. That looks intended, otherwise report back:

   {'registration': selected}
   

I suppose you can make jQuery serialize the values for you but fixing these little details in your code should do the trick anyway.