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 8 of 8
  1. #1
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb Radio & Checkbox & Drop Down values

    Continuation of a resolved thread: My attempt at checking radio buttons.

    I tried making a test HTML for 'OldPedant's post #5 in the referenced link above.
    In the process, I tried using the same type of logic to a single & multiple select box.

    It seems to work, but I would like an evaluation of the logic for the 'getSelectValue()' function.

    Is it a good way to perform the checks?
    Was/is there a way to use the original 'getGroupValue()' function with the D-Downs in one common function?

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> CBox/RBtn 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="0"> 0<br>
       <input type="checkbox" name="cbox" id="cb1" value="1"> 1<br>
       <input type="checkbox" name="cbox" id="cb2" value="2"> 2<br>
       <input type="checkbox" name="cbox" id="cb3" value="3"> 3<br>
       <input type="checkbox" name="cbox" id="cb4" value="4"> 4
      </td>
      <td valign="top"> RBtn<br>
       <input type="radio" name="rbtn" value="A"> A<br>
       <input type="radio" name="rbtn" value="B"> B<br>
       <input type="radio" name="rbtn" value="C"> C<br>
       <input type="radio" name="rbtn" value="D"> D<br>
       <input type="radio" name="rbtn" value="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
      </td>
    
      <td valign="top">  Single DD<br>Selection<br>
       <select id="sboxS" name="sboxS">
        <option value="">Choose One</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="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="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d">d</option>
        <option value="e">e</option>
       </select>
      </td>
     </tr>
    </table> <p> <button onclick="statusDisplay()">Status Report</button>
    </form>
    
    <script type="text/javascript">
    
    // Following from: http://www.codingforums.com/showthread.php?t=284053
    function getGroupValue( group ) {
        if ( group == null ) { return null; } // OMIT this if you know there is at least one 
    // handle the case of only one item in the "group"
        if ( group.length == null ) { return group.checked ? [ group.value ] : null; }
    
        var allchecked = [ ];
        for ( var g = 0; g < group.length; ++g ) {
             if ( group[g].checked ) { allchecked.push( group[g].value ); }
        }
        return allchecked.length > 0 ? allchecked : null; 
    }
    
    // Modified from above for Drop-Down Selections (single and multiple)
    function getSelectValue( group ) {
        if ( group == null ) { return null; } // OMIT this if you know there is at least one 
    // handle the case of only one item in the "group"
        if ( group.options.length == null ) {
          return (group.selectedIndex != -1) ? [ group.options[group.selectedIndex].value ] : null; }
    
        var allchecked = [ ];
        for ( var g = 0; g < group.options.length; ++g ) {
             if ( group.options[g].selected ) { allchecked.push( group.options[g].value ); }
        }
        return allchecked.length > 0 ? allchecked : null; 
    }
    
    function statusDisplay() {
      var frm = document.getElementById('myForm');
      var cb = getGroupValue(frm.cbox);
      var rb = getGroupValue(frm.rbtn);
      var cbA = getGroupValue(frm.cboxAgree);
      var rbA = getGroupValue(frm.rbtnAgree);
      var sbS = getSelectValue(frm.sboxS);
      var sbM = getSelectValue(frm.sboxM);
      var str = 'cbox: '+cb+'\n\nrbtn: '+rb+'\n\nsingle cbox: '+cbA+'\n\nsingle rbtn: '+rbA
              + '\n\nsingle select: '+sbS+'\n\nmultiple select: '+sbM;
      alert(str);
    }
    </script>
    
    </body>
    </html>
    Last edited by jmrker; 12-14-2012 at 06:41 PM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I'll follow you to this post then..
    I would correct the HTML at the beginning (in particular, to prevent IE dropping into quirks mode) so that it can be tested in all browsers:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title> CBox/RBtn Tests </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
    Just my personal opinion/preference but I would return the value false rather than null. I might use null if a function is expected to return an object.

    Seems to work well. Again, just my personal opinion , but I would prefer to use separate functions. I think these are trying to do too much, and if I look at this again in a couple of months I'll need to remind myself of what the functions do. Of course, function documentation (docstrings) would help with this.
    "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
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb Recommended modifications

    Here I have incorporated your recommendations, if of interest to anyone else...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> CBox/RBtn/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
      </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="mab-C">c</option>
        <option value="msb-D">d</option>
        <option value="msh-E">e</option>
       </select>
      </td>
     </tr>
    </table> <p> <button onclick="statusDisplay()">Status Report</button>
    </form>
    
    <script type="text/javascript">
    
    // Following from: http://www.codingforums.com/showthread.php?t=284053
    function getGroupValue( group ) {
        if ( group == null ) { return false; } // OMIT this if you know there is at least one 
    // handle the case of only one item in the "group"
        if ( group.length == null ) { return group.checked ? [ group.value ] : false; }
    //  if ( group.length == null ) { return group.checked ? [ 0 ] : false; }  // to return position, instead of value
    
        var allchecked = [ ];
        for ( var g = 0; g < group.length; ++g ) {
             if ( group[g].checked ) { allchecked.push( group[g].value ); }
    //       if ( group[g].checked ) { allchecked.push( g ); }  // to return position, instead of value, of selections
        }
        return allchecked.length > 0 ? allchecked : false; 
    }
    
    // Modified from above for Drop-Down Selections (single and multiple)
    function getSelectValue( group ) {
        if ( group == null ) { return false; } // OMIT this if you know there is at least one 
    // handle the case of no items in the "group"
        if ( group.options.length == null ) {
            return (group.selectedIndex != -1) ? [ group.options[group.selectedIndex].value ] : false;
            return (group.selectedIndex != -1) ? [ group.selectedIndex ] : false;  // to return position, instead of value
        }
    
        var allchecked = [ ];
        for ( var g = 0; g < group.options.length; ++g ) {
             if ( group.options[g].selected ) { allchecked.push( group.options[g].value ); }
    //       if ( group.options[g].selected ) { allchecked.push( g ); }  // to return position, instead of value, of selections
        }
        return allchecked.length > 0 ? allchecked : false; 
    }
    
    function statusDisplay() {
      var frm = document.getElementById('myForm');
      var cb = getGroupValue(frm.cbox);
      var rb = getGroupValue(frm.rbtn);
      var cbA = getGroupValue(frm.cboxAgree);
      var rbA = getGroupValue(frm.rbtnAgree);
      var sbS = getSelectValue(frm.sboxS);
      var sbM = getSelectValue(frm.sboxM);
      var str = 'cbox: '+cb+'\n\nrbtn: '+rb+'\n\nsingle cbox: '+cbA+'\n\nsingle rbtn: '+rbA
              + '\n\nsingle select: '+sbS+'\n\nmultiple select: '+sbM;
      alert(str);
    }
    </script>
    
    </body>
    </html>

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    It is a shame we can't convert a nodeList into an array with [group], so I think I've just wasted 30 minutes:

    Code:
        var arr = [];
        for (var i = group.length; i--; arr.unshift(group[i]));
        return arr.map(function (obj) {
            return (obj.checked) ? obj.value : false;
        }).filter(function (obj) {
            return (obj !== false);
        });
    ..but exploring JavaScript is never really a waste of time
    "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

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    Quote Originally Posted by AndrewGSW View Post
    It is a shame we can't convert a nodeList into an array with [group], so I think I've just wasted 30 minutes:

    Code:
        var arr = [];
        for (var i = group.length; i--; arr.unshift(group[i]));
        return arr.map(function (obj) {
            return (obj.checked) ? obj.value : false;
        }).filter(function (obj) {
            return (obj !== false);
        });
    ..but exploring JavaScript is never really a waste of time
    That is a quite interesting piece of code.
    I won't pretend I understand it all, but it does appear to work as the earlier script
    EXCEPT for the single checkbox or radio button option.
    Since I believe they would be seldom used that way, and could easily be checked with ID assignments rather than groups,
    I'll demonstrate what the changes would look like.
    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
      </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="mab-C">c</option>
        <option value="msb-D">d</option>
        <option value="msh-E">e</option>
       </select>
      </td>
     </tr>
    </table>
    <p> <button onclick="statusDisplay()">Status Report</button>
    <button onclick="altStatusDisplay()">Alternate Status Report</button>
    </form>
    
    <script type="text/javascript">
    
    // Following from: http://www.codingforums.com/showthread.php?t=284053
    function getGroupValue( group ) {
        if ( group == null ) { return false; } // OMIT this if you know there is at least one 
    // handle the case of only one item in the "group"
        if ( group.length == null ) { return group.checked ? [ group.value ] : false; }
    //  if ( group.length == null ) { return group.checked ? [ 0 ] : false; }  // to return position, instead of value
    
        var allchecked = [ ];
        for ( var g = 0; g < group.length; ++g ) {
             if ( group[g].checked ) { allchecked.push( group[g].value ); }
    //       if ( group[g].checked ) { allchecked.push( g ); }  // to return position, instead of value, of selections
        }
        return allchecked.length > 0 ? allchecked : false; 
    }
    
    // Modified from above for Drop-Down Selections (single and multiple)
    function getSelectValue( group ) {
        if ( group == null ) { return false; } // OMIT this if you know there is at least one 
    // handle the case of no items in the "group"
        if ( group.options.length == null ) {
            return (group.selectedIndex != -1) ? [ group.options[group.selectedIndex].value ] : false;
    //      return (group.selectedIndex != -1) ? [ group.selectedIndex ] : false;  // to return position, instead of value
        }
    
        var allchecked = [ ];
        for ( var g = 0; g < group.options.length; ++g ) {
             if ( group.options[g].selected ) { allchecked.push( group.options[g].value ); }
    //       if ( group.options[g].selected ) { allchecked.push( g ); }  // to return position, instead of value, of selections
        }
        return allchecked.length > 0 ? allchecked : false; 
    }
    
    function statusDisplay() {
      var frm = document.getElementById('myForm');
      var cb = getGroupValue(frm.cbox);
      var rb = getGroupValue(frm.rbtn);
      var cbA = getGroupValue(frm.cboxAgree);
      var rbA = getGroupValue(frm.rbtnAgree);
      var sbS = getSelectValue(frm.sboxS);
      var sbM = getSelectValue(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);
    }
    
    /* ----------------------Alternative script-------------------------------------------------- */
    function altStatusDisplay() {
      var frm = document.getElementById('myForm');
      var cb = getGroupChecks(frm.cbox);
      var rb = getGroupChecks(frm.rbtn);
      var cbA = getGroupChecks(frm.cboxAgree);  // does not handle single checkboxes
      var rbA = getGroupChecks(frm.rbtnAgree);  // does not handle single radio buttons
      var sbS = getSelectOptions(frm.sboxS);
      var sbM = getSelectOptions(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);
    }
    
    // Missing some single button status reports
    //   Does NOT handle single group selections
    function getGroupChecks(group) {
        var arr = [];
        for (var i = group.length; i--; arr.unshift(group[i]));
        return arr.map(function (obj) {
            return (obj.checked) ? obj.value : false;
        }).filter(function (obj) {
            return (obj !== false);
        });
    }
    
    function getSelectOptions(group) {
        var arr = [];
        for (var i = group.length; i--; arr.unshift(group[i]));
        return arr.map(function (obj) {
            return (obj.selected) ? obj.value : false;
        }).filter(function (obj) {
            return (obj !== false);
        });
    }
    /* ------------------------------------------------------------------------ */
    
    </script>
    
    </body>
    </html>
    Thanks again for the comments and thoughts 'AndrewGSW'
    Do you think it relevant enough to put into the 'Post A Javascript' section?

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by jmrker View Post
    Was/is there a way to use the original 'getGroupValue()' function with the D-Downs in one common function?
    Code:
    function getGroupValue( 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 : null; 
    }

  • The Following 2 Users Say Thank You to Logic Ali For This Useful Post:

    AndrewGSW (12-15-2012), jmrker (12-15-2012)

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Do you think it relevant enough to put into the 'Post A Javascript' section?
    Up to you, although Logic Ali may have trumped you
    Code:
        var arr = [];
        for (var i = group.length; i--; arr.unshift(group[i]));
        return arr.map(function (obj) {
            return (obj.checked) ? obj.value : false;
        }).filter(function (obj) {
            return (obj !== false);
        });
    I'm not suggesting this should be incorporated - there is no added value, I was just experimenting .

    A DOM nodeList is like an array but is not an array - it's really a collection of objects. This code first stores (converts?) the nodeList to an array.

    The array map method creates another array by applying a function to every element of an array. In this instance, the new array contains either the value false, or the value of the input; that is, if it is checked.

    The method filter is then applied to the resultant array. This removes the false elements from the array, leaving only the values of those elements which were checked.

    It is not really useful for this example. It could be useful if a lot more processing is done within the map or filter methods. Andy.
    "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

  • Users who have thanked AndrewGSW for this post:

    jmrker (12-15-2012)

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Thumbs up

    Quote Originally Posted by logic ali View Post
    Code:
    function getGroupValue( 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 : null; 
    }
    wow!!!
    I like the idea of one function to collect information from different element types.
    Less typing, less prone to errors, common implementation, understandable and neat all rolled-up into one small package.
    Thanks for the attention to the topic, 'Logic Ali'.

    Added to the "Post A JavaScript" section of this forum. See: http://www.codingforums.com/showthre...64#post1300264
    Last edited by jmrker; 12-16-2012 at 02:27 PM.


  •  

    Posting Permissions

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