Previous Page
Next Page

Working with Radio Buttons

Radio buttons are an either/or interface element that let the user pick one (and only one) choice within a group of options. Radio buttons should be used when one of those options is required. As shown in Figure 7.9, the form uses radio buttons to let the hypothetical car buyer choose between a two-door or four-door automobile. In this case, you can only pick one of these choices, and you must make a choice.

Figure 7.9. Radio buttons are the best way to let the user pick only one choice from a group of options.


As seen in Script 7.12, it doesn't take much scripting to check that one button is selected. We use a technique where we loop through each button and check its status and then turn the radio buttons' label and buttons red and bold if no button is picked.

Script 7.12. Only one radio button may be checked, and this JavaScript is there to enforce the interface law.

window.onload = initForms;

function initForms() {
     for (var i=0; i< document.forms.length; i++) {
        document.forms[i].onsubmit = function() {return validForm();}
     }
}

function validForm() {
     var allGood = true;
     var allTags = document.getElementsByTagName ("*");

     for (var i=0; i<allTags.length; i++) {
        if (!validTag(allTags[i])) {
           allGood = false;
        }
     }
     return allGood;

     function validTag(thisTag) {
        var outClass = "";
        var allClasses = thisTag.className.split (" ");

        for (var j=0; j<allClasses.length; j++) {
           outClass += validBasedOnClass(allClasses[j]) + " ";
        }
        thisTag.className = outClass;

        if (outClass.indexOf("invalid") > -1) {
           invalidLabel(thisTag.parentNode);
           thisTag.focus();
           if (thisTag.nodeName == "INPUT") {
              thisTag.select();
           }
           return false;
        }
        return true;

        function validBasedOnClass(thisClass) {
           var classBack = "";

           switch(thisClass) {
              case "":
              case "invalid":
                 break;
              case "reqd":
                 if (allGood && thisTag.value == "") classBack = "invalid ";
                 classBack += thisClass;
                 break;
              case "radio":
                 if (allGood && !radioPicked (thisTag.name)) classBack = "invalid ";
                 classBack += thisClass;
                 break;
              case "isNum":
              case "isZip":
              case "email":
                 classBack += thisClass;
                 break;
              default:
                 if (allGood && !crossCheck (thisTag,thisClass)) classBack = "invalid ";
                 classBack += thisClass;
           }

         return classBack;
      }

      function crossCheck(inTag,otherFieldID) {
         if (!document.getElementById (otherFieldID)) return false;
         return (inTag.value != "" ||  document.getElementById (otherFieldID).value != "");
      }

      function radioPicked(radioName) {
         var radioSet = "";

         for (var k=0; k<document.forms.length; k++) {
            if (!radioSet) {
               radioSet = document.forms [k][radioName];
            }
         }
         if (!radioSet) return false;
         for (k=0; k<radioSet.length; k++) {
            if (radioSet[k].checked) {
               return true;
            }
         }
         return false;
      }

      function invalidLabel(parentTag) {
         if (parentTag.nodeName == "LABEL") {
            parentTag.className += " invalid";
         }
      }
    }
}

To make sure that the user picks a radio button:

1. 
if (allGood && !radioPicked(thisTag. name)) classBack = "invalid ";



This goes into the radio block of the switch/case conditional. We want to check to make sure at least one of the radio buttons was picked, and the new radioPicked() function handles that. If it returns false, then we set classBack to invalid.

2. 
function radioPicked(radioName) {
  var radioSet = "";



Start the new radioPicked() function, and initialize the radioSet variable.

This function takes in the name of the set of radio buttonsin this case, DoorCt, as found in Script 7.10. Note that that's not the id of the current tag or a class or anything that we usually see, but its name. The name attribute of <input> tags is how HTML knows which radio buttons are grouped together; that is, all <input> tags with the same name attribute are part of one radio button set.

3. 
for (var k=0; k<document.forms. length; k++) {
  if (!radioSet) {
    radioSet = document.forms [k][radioName];
  }
}



We next loop through all the forms on the current page. We know the name of the radio button set, but we don't know what form it's a part of, and any given page can have several forms. Because this function is inside another function looping on j, we use k for our loop here.

We then try to set radioSet to the name of this set of radio buttons inside the form we're looking at. If it's found, radioSet will then have a value.

4. 
if (!radioSet) return false;



When the loop is done, we look at radioSetif it hasn't been set, we return false, because we couldn't find it, and so, couldn't check it.

5. 
for (k=0; k<radioSet.length; k++) {
  if (radioSet[k].checked) {
     return true;
  }
}



Okay, we've got the radio button set we want to inspect. Now, we start another loop to look through each button. When we find one that's checked, we return true, because we're done.

6. 
return false;



If we make it to the end of the loop, we've looked at the entire set and nothing was clicked. In that case, return false and change the radio buttons' label and make the buttons red and bold.


Previous Page
Next Page