Get Checkbox[] values in javascript for php

Question

I am having an issue getting the values checked in the check-box. I have tried to clean up the code.

I have been able to get the all the selected check-boxes selected (not per row) or i can get the check-box id per row but not the selected value. I am pretty sure I can transfer the values to the another page but do not know how to get them.

Any assistance here would greatly be appreciated!

 //php variables used
 $pages = 2
 $size = 4 

  <form id="form" name="cb">
  <div style=" width:800px; height:500px; overflow:auto">
  <h2>Select Editions</h2>
  <table id='table' name='table' border=1 cellpadding=7 width=50% height=50% align='center'>\n

    for($x = 1; $x <= $pages; $x++) :
      print "<td id='page_$x' class='page_button' align='center' custom='0' >Page $x - ";
        for($i = 1; $i <= $size; $i++) :
          print "<input type='checkbox' class='ebutton' id='etype_$x' name='checks[]' value='$i' /> $i";
        endfor;

      </td>
      </tr>

    //php end for loop
    endfor;

  </div>
  </form>

Here is the Javascript that updates based on the class of the checkbox class

    $(document).ready(function() {
      $(".ebutton").change(function() {

        var idp = $(this).attr("id").split("_");
        var page_num = idp[1];

        //  I need to find out how to get the checkboxes that are checked per row. Ex: 01,02
        //var editions = ?;
        //alert(editions);

        var hidden_id = "#etype_page_" + page_num;
          if($(hidden_id).length < 1) {
            $("#base").append('<input type="hidden" id="etype_page_'+ page_num +'" name="'+ page_num +'"  value="'+ editions +'" class="hidden_edtype" custom="' + editions +'">');
          } else {
            $(hidden_id).val($(this).val());
          }
        update_eShow();
      });
    });

    function update_eShow() {
      $("#eShow").html('');
        $(".hidden_edtype").each(function() {
         var page = $(this).attr("name");
         var value = $(this).attr("custom");
         $("#eShow").append('page:' + page + ' values:' + value +'<br>');
      });
    }

page looks like this:

| Page 1 - []1 []2 []3 []4 |

| Page 2 - []1 []2 []3 []4 |

Answer 1

the name should have the different number, the name being sent in the form it should be unique just like your id.

try to set the name like the id : name='etype_$x'

and then using the debug console (if using chrome hit f12) then go to network and visualize what variables and values being sent within the form.

Answer 2

var $editions = $("#page_"+page_num+" input[checked=checked]");
var editions = [];
$editions.each(function(input) {
  editions.push($(input).val());
});

Answer 3

you don't need javascript to send the checkboxes to a php

You can name the checks like checks[$page][] :

print "<input type='checkbox' class='ebutton' id='etype_$x' name='checks[$x][]' value='$i' /> $i";

and in your action page you will have in $_POST(pr $_GET)["checks"][1] an array with the values checked for the page 1 (if any)

Answer 4

Now, Knowing it is a popup windows who sends to parent the checks...

Make the checks like:

print "<input type='checkbox' class='ebutton checks$x' id='etype_$x' name='checks".$x."[]' value='$i' /> $i";

to get the class of checks of the page 1 as "checks1", the class of page 2 checks like "checks2", ...

And to get the checked ones:

 var page_num = idp[1];
 var checks=$('checks'+page_num).attr('checked',true); //to get all checked checkboxes of the class checks+page_num
 var editions="";
 checks.each(function(ch) {
     editions+=$(ch).val()+',';
 }

and editions has all the checked values of that page separated by ','