View Single Post
Old 12-14-2012, 06:32 PM   PM User | #1
jmrker
Senior Coder

 
jmrker's Avatar
 
Join Date: Aug 2006
Location: FL
Posts: 2,764
Thanks: 29
Thanked 453 Times in 447 Posts
jmrker will become famous soon enough
Lightbulb Radio & Checkbox & Drop Down values

Continuation of a resolved thread: http://www.codingforums.com/showthread.php?t=284053

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..
jmrker is offline   Reply With Quote