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>