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

[codefossa]

You can check this out: http://xaotique.no-ip.org/tmp/17/

 

View the source and you should get your answer. If you have any questions, feel free to ask, but please use a code box because I don't feel like bothering to look through plain text.

[RevPhil]

If it was only one group of check boxes then I can get it to work like in the example you have, but I have multiple groups.

[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/

[Psycho]

You are giving all the checkboxes in a group the same ID - that is not valid for HTML. All elements need a unique ID. Also, since you have different "groups" of checkboxes named as arrays - you should give each group a different index for that array. You will then use that index to identify which group each checkbox belongs to.

[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:

 

 $(document).ready(function() {
   $(".ebutton").click(function() {
   var idp = $(this).attr("id").split("_");
   var page_num = idp[1];
   alert(page_num);
  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

[Psycho]

I'm not very familiar with JQuery to be able to write the solution, but I can provide the framework for the solution.

 

Instead of appending the text for each checked value you need to save the values to variable(s) associated with each page. Then, once you've processed all of the checkboxes - them create the output from those variables.

 

Here is some sample code - not sure if it is functional

function update_eShow()
{
   $("#eShow").html('');
   var values = new Array();
   $(".hidden_edtype").each(function() {
    if(showPage!==true)
    {
	    //On first iteration append page description
	    var page = $(this).attr("name");
	    $("#eShow").append('page:' + page + ' value:');
	    showPage = true;
    }
    else
    {
	    //On 2+ iterations append comma separator
	    $("#eShow").append(',');
    }
    //Append value to output
    var value = $(this).attr("custom");
    $("#eShow").append('page:' + page + ' value:' + value +'<br>');
   });
}

[codefossa]

If you're getting them ready to send to another page, you could check out serialize() for the form. Give each of the sets of checkboxes a different name and they'll be set up and separated for you to deal with in PHP.

 

On a side note .. This is Javascript. Java is so completely different that it has absolutely nothing to do with anything here.

Edited December 18, 2012 by Xaotique