Home|Sitemap|Contact

How can you validate multiple sets of radio buttons?

Loop through all the form fields looking for radio buttons. Loop through each radio group to determine if one value is checked and return false (prevent the form from submitting) if one is not checked.
3 Was the work assigned completed with a minimum of re-work?
4 Was this person readily adaptable to changing environments? 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<script type="text/javascript">
<!--
    function validate(frm) {
    var inputs=document.getElementsByTagName('INPUT');
    var oneChecked;
    var radio_set;

    for (var idx=0; idx<inputs.length; idx++) {
        if (inputs[idx].type.toLowerCase()=='radio') {
            radio_set = frm.elements[inputs[idx].name];
            oneChecked=false;
            for (var jdx=0; jdx<radio_set.length; jdx++) {
                if(radio_set[jdx].checked) {
                    oneChecked = true;
                }
            }
            if (oneChecked == false) {
                alert("Please make a selection regarding the " + radio_set[0].name);
                radio_set[0].focus();
                return false;
            }
        } 
    }
    return true;
}
//-->
</script>
</head>

<body>
<form action="radioValidation.asp" method="post" onsubmit="return validate(this);">
<table id="qTable" style="borderCollapse: collapse">
  <tr>
    <td class="regText">3</td>
    <td class="regText">Was the work assigned completed with a minimum of re-work?</td>
    <td align="center"><input type="radio" name="rework_minimum" value="1" id="rework_minimum"></td>
    <td align="center"><input type="radio" name="rework_minimum" value="3" id="rework_minimum"></td>
    <td align="center"><input type="radio" name="rework_minimum" value="9" id="rework_minimum"></td>
  </tr>
  <tr>
    <td class="regText">4</td>
    <td class="regText">Was this person readily adaptable to changing environments?</td>
    <td align="center"><input type="radio" name="adaptable" value="1" id="adaptable"></td>
    <td align="center"><input type="radio" name="adaptable" value="3" id="adaptable"></td>
    <td align="center"><input type="radio" name="adaptable" value="9" id="adaptable"></td>
  </tr>
</table>
<input type="submit" value="Submit">
</form> 
</body>

</html>