...

View Full Version : One common function to retrieve group element values



jmrker
12-16-2012, 05:29 AM
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. :thumbsup:

The common function to collect the values is:


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:


<!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>

AndrewGSW
12-17-2012, 06:14 PM
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.

jayanta1
01-02-2013, 11:43 AM
The common function to collect the values is:

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:




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



// 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
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum