Go Back   CodingForums.com > :: Client side development > JavaScript programming > Post a JavaScript

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-16-2012, 05:29 AM   PM User | #1
jmrker
Senior Coder

 
jmrker's Avatar
 
Join Date: Aug 2006
Location: FL
Posts: 2,797
Thanks: 30
Thanked 462 Times in 456 Posts
jmrker will become famous soon enough
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 http://www.codingforums.com/showthread.php?t=284151 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
jmrker is offline   Reply With Quote
Old 12-17-2012, 06:14 PM   PM User | #2
AndrewGSW
Senior Coder

 
Join Date: Apr 2011
Location: London, England
Posts: 2,120
Thanks: 15
Thanked 354 Times in 353 Posts
AndrewGSW will become famous soon enough
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
AndrewGSW is offline   Reply With Quote
Old 01-02-2013, 11:43 AM   PM User | #3
jayanta1
New to the CF scene

 
Join Date: Jan 2013
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
jayanta1 is an unknown quantity at this point
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: 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 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
jayanta1 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:13 PM.


Advertisement
Log in to turn off these ads.