Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Thumbs up One common function to retrieve group element values

    With help from 'Logic Ali' and 'AndrewGSW', we now have a common function to get the values from group elements.
    Group elements defined here as single or multiple radio buttons, single or multiple checkboxes and single or multiple drop down (select box) elements.
    See Radio & Checkbox & Drop Down values for discussions leading to this function.

    The common function to collect the values is:
    Code:
    function getAllGroupValues( group ) { // group == radio/checkbox single/group or <select> options list 
      var selectedElems = [], g;
      if( group.length === undefined ) { 
        if( group.checked || group.selected ) { selectedElems.push( group.value ); }
      } else {
        for( g = 0; group[ g ]; ++g ) {
          if( group[ g ].checked || group[ g ].selected ) { selectedElems.push( group[ g ].value );	}
        }
      }  
      return selectedElems.length > 0 ? selectedElems : false;   //  can also use 'null' or 'false' here
    }
    and a HTML example of it usage is:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> CBox/RBtn/SBox/Multi-SBox Tests </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    
    <body>
    <form id="myForm" action="#" method="post" onsubmit="return false">
    <table border="1">
     <tr>
      <td valign="top"> CBox<br>
       <input type="checkbox" name="cbox" id="cb0" value="cb-0"> 0<br>
       <input type="checkbox" name="cbox" id="cb1" value="cb-1"> 1<br>
       <input type="checkbox" name="cbox" id="cb2" value="cb-2"> 2<br>
       <input type="checkbox" name="cbox" id="cb3" value="cb-3"> 3<br>
       <input type="checkbox" name="cbox" id="cb4" value="cb-4"> 4
      </td>
      <td valign="top"> RBtn<br>
       <input type="radio" name="rbtn" value="rb-A"> A<br>
       <input type="radio" name="rbtn" value="rb-B"> B<br>
       <input type="radio" name="rbtn" value="rb-C"> C<br>
       <input type="radio" name="rbtn" value="rb-D"> D<br>
       <input type="radio" name="rbtn" value="rb-E"> E
      </td>
    
      <td valign="top"> Single CBox<br>
       <input type="checkbox" name="cboxAgree" id="cbAgree" value="cbAgree"> CBox Agree
      </td>
      <td valign="top"> Single RBtn<br>
       <input type="radio" name="rbtnAgree" value="rbAgree"> RBtn Agree<br>Kinda Silly Usage
      </td>
    
      <td valign="top">  Single DD<br>Selection<br>
       <select id="sboxS" name="sboxS">
        <option value="">Choose One</option>
        <option value="ssb-0">0</option>
        <option value="ssb-1">1</option>
        <option value="ssb-2">2</option>
        <option value="ssb-3">3</option>
        <option value="ssb-4">4</option>
       </select>
      </td>
      <td valign="top"> Multiple DD<br>Selection<br>
       <select id="sboxM" name="sboxM" multiple>
        <option value="">Choose One Or More</option>
        <option value="msb-A">a</option>
        <option value="msb-B">b</option>
        <option value="msb-C">c</option>
        <option value="msb-D">d</option>
        <option value="msh-E">e</option>
       </select>
      </td>
     </tr>
    </table>
    <p> <button onclick="altCombinedStatusDisplay()">COMBINED Status</button>
    </form>
    
    <script type="text/javascript">
    
    // Following from: http://www.codingforums.com/showthread.php?t=284151
    function altCombinedStatusDisplay() {
      var frm = document.getElementById('myForm');
      var cb  = getAllGroupValues(frm.cbox);
      var rb  = getAllGroupValues(frm.rbtn);
      var cbA = getAllGroupValues(frm.cboxAgree);  // does handle single checkboxes
      var rbA = getAllGroupValues(frm.rbtnAgree);  // does handle single radio buttons
      var sbS = getAllGroupValues(frm.sboxS);
      var sbM = getAllGroupValues(frm.sboxM);
      var str = 'cbox: '+cb+'\n\nrbtn: '+rb+'\n\nsingle cbox: '+cbA+'\n\nsingle rbtn: '+rbA
              + '\n\nsingle select: '+sbS+'\n\nmultiple select:\n'+sbM;
      alert(str);
    }
    
    function getAllGroupValues( group ) { // group == radio/checkbox single/group or <select> options list 
      var selectedElems = [], g;
      if( group.length === undefined ) { 
        if( group.checked || group.selected ) { selectedElems.push( group.value ); }
      } else {
        for( g = 0; group[ g ]; ++g ) {
          if( group[ g ].checked || group[ g ].selected ) { selectedElems.push( group[ g ].value );	}
        }
      }  
      return selectedElems.length > 0 ? selectedElems : false;   //  can also use 'null' or 'false' here
    }
    </script>
    
    </body>
    </html>
    Last edited by jmrker; 12-17-2012 at 11:27 PM. Reason: Per requests

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You are using an HTML5 DOCTYPE but with the obsolete center (aargh!) tag and valign attributes. http://validator.w3.org/#validate_by_input

    You should use action="#" for the form as it cannot be empty.

    I know this is just sample HTML but it's best that it is correct if posted here.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The common function to collect the values is:

    Code:
    Code:
    function getAllGroupValues( group ) { // group == radio/checkbox single/group or options list
      var selectedElems = [], g;
      if( group.length === undefined ) {
        if( group.checked || group.selected ) { selectedElems.push( group.value ); }
      } else {
        for( g = 0; group[ g ]; ++g ) {
          if( group[ g ].checked || group[ g ].selected ) { selectedElems.push( group[ g ].value );        }
        }
      } 
      return selectedElems.length > 0 ? selectedElems : false;  //  can also use 'null' or 'false' here
    }
    and a HTML example of it usage is:

    Code:


    Code:
    CBox/RBtn/SBox/Multi-SBox Tests
    
    
    
    
    
    
    
     
      CBox
    
      0
    
      1
    
      2
    
      3
    
      4
     
      RBtn
    
      A
    
      B
    
      C
    
      D
    
      E
     
    
      Single CBox
    
      CBox Agree
     
      Single RBtn
    
      RBtn Agree
    Kinda Silly Usage
     
    
        Single DD
    Selection
    
     
        Choose One
        0
        1
        2
        3
        4
     
     
      Multiple DD
    Selection
    
     
        Choose One Or More
        a
        b
        c
        d
        e
     
     
     
    
    COMBINED Status
    Code:
    // Following from: Radio & Checkbox & Drop Down values
    function altCombinedStatusDisplay() {
      var frm = document.getElementById('myForm');
      var cb  = getAllGroupValues(frm.cbox);
      var rb  = getAllGroupValues(frm.rbtn);
      var cbA = getAllGroupValues(frm.cboxAgree);  // does not handle single checkboxes
      var rbA = getAllGroupValues(frm.rbtnAgree);  // does not handle single radio buttons
      var sbS = getAllGroupValues(frm.sboxS);
      var sbM = getAllGroupValues(frm.sboxM);
      var str = 'cbox: '+cb+'\n\nrbtn: '+rb+'\n\nsingle cbox: '+cbA+'\n\nsingle rbtn: '+rbA
              + '\n\nsingle select: '+sbS+'\n\nmultiple select:\n'+sbM;
      alert(str);
    }
    
    function getAllGroupValues( group ) { // group == radio/checkbox single/group or options list
      var selectedElems = [], g;
      if( group.length === undefined ) {
        if( group.checked || group.selected ) { selectedElems.push( group.value ); }
      } else {
        for( g = 0; group[ g ]; ++g ) {
          if( group[ g ].checked || group[ g ].selected ) { selectedElems.push( group[ g ].value );        }
        }
      } 
      return selectedElems.length > 0 ? selectedElems : false;  //  can also use 'null' or 'false' here
    }
    Last edited by VIPStephan; 01-06-2013 at 09:47 AM. Reason: added code BB tags


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •