#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep Power
    0

    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:
    <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:
    $(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
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,910
    Rep Power
    1045
    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.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep Power
    0

    Jacques reply


    That is true, it should be:

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


    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')
    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.
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,910
    Rep Power
    1045
    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.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep 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?

    Originally Posted by Jacques1
    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.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep 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/
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep 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

IMN logo majestic logo threadwatch logo seochat tools logo