Get Checkbox[] values in JavaScript for PHP

[RevPhil]

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

I can get the all the selected check-boxes selected (but 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>

endfor;

with this as the JavaScript

    $(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 |

Here is what I have been able to get, but its not right:

I select both 01 and 02 for page 1 and only 01 for page 2. My results are:
Page:1 Values: 01
Page:2 Values: 01,02,01

[Dormilich]

checkboxes do not emit a change event, because their value never changes (only through JS, maybe).

[RevPhil]

i am using the class to initiate the change event in Javascipt. It works but i can not figure out how to get the values selected per table row

[RevPhil]

I have created a Fiddle page that has the problem in it if anyone can assist. Its an HTML table with 2 rows of checkboxes. I need to get the checked data per row, and all I can figure out is how to get all checked values... Here is the link if someone can assist: http://jsfiddle.net/RevPhil/yqh3x/

[Dormilich]

you have given out the IDs (on the checkboxes) multiple times, which is invalid.

why not going for the ID of the parent element?

[RevPhil]

that is a good idea. Do you have an example?

[Dormilich]

something like that this.parentNode .id ?

[RevPhil]

I modified the id on the PHP to this...

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

and the Java to this:

   
var editions='';
   document.getElementById("editions").style.visibility="visible";
   var elements = document.getElementById("myform").elements;
   for(var i=0; i< elements.length;i++){
      if(elements[i].type == 'checkbox' && elements[i].checked)
         editions = elements[i].value ;
   }

      var hidden_id = "#etype_page_" + page_num;
      page_num = page_num.replace(/[\[\]']+/g,''); //remove brackets
      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 + ' value:' + value +'<br>');
    });
  }

My results are now:

page:1 value:01
page:1 value:02
page:2 value:01
page:2 value:02

How can I combine the like pages and values to read
page:1 value:01,02
page:2 value:01,02

[Dormilich]

line #15, you have to assign the multiple values there.

but I don’t understand the business with the hidden fields anyway.

I would just go collect all checked boxes and build up from there.

[RevPhil]

I am using the hidden fields to pass the values to the origional page. This code is for a popup window to gather specific data

[Dormilich]

then your code is heavily misleading. anyways, you can also pass data directly from one window to another.