Checkboxlist values?

Dev Shed Forums Sponsor:

December 13th, 2012, 11:35 AM

RevPhil

Registered User

Join Date: Dec 2012

Posts: 5

Time spent in forums: 37 m 20 sec
Reputation Power: 0

jQuery - Checkboxlist values?

I need some assistance getting the values of checkboxes in a table. If there is only one row of boxes then I am able to get the values, but if there are multiple rows I cannot.

The application that I have is opening a popup window and using javascript to return the values at runtime.
Here is a sample of the code i am using:

html Code:

Original - html Code

<form id="myform" name="form1">
<div id="checks">
<table id="table" name="table" border=1 cellpadding=7 width=50% height=50% align="center">
<tr>
<th>Page </th>
<th>Checks</th>
</tr>
<td id="page_1" class="page_button" align="left">1
<td>
<input type="checkbox" id="etype_1" class="ebutton" name="checks[]" value='01'> 01
<input type="checkbox" id="etype_1" class="ebutton" name="checks[]" value='02'> 02
<input type="checkbox" id="etype_1" class="ebutton" name="checks[]" value='03'> 03
<input type="checkbox" id="etype_1" class="ebutton" name="checks[]" value='04'> 04        
</td>
</td>
</tr>
<td id="page_2" class="page_button" align="left">2
<td>
<input type="checkbox" id="etype_2" class="ebutton" name="checks[]" value='01'> 01
<input type="checkbox" id="etype_2" class="ebutton" name="checks[]" value='02'> 02
<input type="checkbox" id="etype_2" class="ebutton" name="checks[]" value='03'> 03
<input type="checkbox" id="etype_2" class="ebutton" name="checks[]" value='04'> 04          
</td>
</td>
</tr>
<td id="page_3" class="page_button" align="left">3
<td>
<input type="checkbox" id="etype_3" class="ebutton" name="checks[]" value='01'> 01
<input type="checkbox" id="etype_3" class="ebutton" name="checks[]" value='02'> 02
<input type="checkbox" id="etype_3" class="ebutton" name="checks[]" value='03'> 03
<input type="checkbox" id="etype_3" class="ebutton" name="checks[]" value='04'> 04          
</td>
</td>
</tr>
</table>
</div>
</form>
</br>
<button>Fetch Values</button>

javascript Code:

Original - javascript Code

$(function () {
    $('$('button').click(function () {
       var idp = $(this).attr("id").split("_");
       var page_num = idp[1];
       var hidden_id = "#etype_page_" + page_num;        
 var boxes ='';
   document.getElementById("checks").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)
         boxes = selements[i].value ;
   }
    alert(page_num);
    alert(boxes);
     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 Checks
1 []01 []02 []03 []04
2 []01 []02 []03 []04
3 []01 []02 []03 []04

When i click a checkbox for page 1 ot records the first value
then i click other values and then click page 2 and it records all checked values ect...

Results:
Page: 1 Values: 01
Page: 2 Values: 01,02,03,01,
Page: 3 Values: 01,02,03,01,04

Please help!
Thanks,
Rev Phil

December 13th, 2012, 12:18 PM

Jacques1

pollyanna

Join Date: Jul 2012

Location: Germany

Posts: 2,047

Time spent in forums: 1 Month 3 Weeks 5 h 5 m 45 sec
Reputation Power: 812

Hi,

I'm sorry to say, but that code is completely broken. Please go through it and fix obvious bugs like syntax errors

Code:

$('$('button')

and typos/nonexistant variables (e. g. "selements"). After that, use the JavaScript console of your browser for debugging.

There's also a logical error: In your "for" loop, you just keep assigning each value to the same variable (namely "boxes"). So instead of collecting the values, you overwrite each one with the next value. You'll need an array or actually append the values to the string.

December 13th, 2012, 12:20 PM

RevPhil

Registered User

Join Date: Dec 2012

Posts: 5

Time spent in forums: 37 m 20 sec
Reputation Power: 0

Jacques reply

That is true, it should be:

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

Quote:

Originally Posted by Jacques1

Hi,

I'm sorry to say, but that code is completely broken. Please go through it and fix obvious bugs like syntax errors

Code:

$('$('button')

December 13th, 2012, 12:32 PM

Jacques1

pollyanna

Join Date: Jul 2012

Location: Germany

Posts: 2,047

Time spent in forums: 1 Month 3 Weeks 5 h 5 m 45 sec
Reputation Power: 812

Have you also read the other part of the reply?

Apart from what I've already mentioned, there are further issues: Your element IDs are not unique, and you use an odd mixture of jQuery and plain JavaScript.

December 13th, 2012, 12:38 PM

RevPhil

Registered User

Join Date: Dec 2012

Posts: 5

Time spent in forums: 37 m 20 sec
Reputation Power: 0

Jacques1 reply

I see the rest now, i just scanned it the first time, sorry...

Sorry about the mixture, but i have been trying all kinds of ways to get the values needed. That's why i need assistance with this.

I am able to get the Page number from the ID and I am trying to use that to get the values for each page. If jQuery is a better option i am willing to pursue that path. I am kind of a javascript newb so i am not sure of the syntax. This is a legacy application i ended up supporting. What should i change it too?

Quote:

Originally Posted by Jacques1

December 17th, 2012, 01:03 PM

RevPhil

Registered User

Join Date: Dec 2012

Posts: 5

Time spent in forums: 37 m 20 sec
Reputation Power: 0

Additional Information

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: Sine I can not post a link here it is broken up...
jsfiddle.net/RevPhil/yqh3x/

December 18th, 2012, 02:20 PM

RevPhil

Registered User

Join Date: Dec 2012

Posts: 5

Time spent in forums: 37 m 20 sec
Reputation Power: 0

Update

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

PHP Code:


		
			
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:

Code:

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

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

// get editions checked /
   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

jQuery - Checkboxlist values?

Developer Shed Advertisers and Affiliates