News
Forums
Fun & Games
Buy the Book
Search Enter your search terms Submit search form

Book Resources
⊕ Scripts
- All Scripts
- Chapter 1
- Chapter 2
- Chapter 3
- Chapter 4
- Chapter 5
- Chapter 6
- Chapter 7
- Chapter 8
- Chapter 9
- Chapter 10
- Chapter 11
- Chapter 12
- Chapter 13
- Chapter 14
- Chapter 15
- Chapter 16
- Chapter 17
FAQ
Errata
⊕ Excerpts
- Table of Contents
- Sample Chapter
⊕ Where to Learn More
- Sites
- Newsgroups
- Books
⊕ Previous Editions

The Workbench
Articles
Useful Scripts

Chapter 7: Form Handling

Contents:

Select-and-Go Navigation
Changing Menus Dynamically
Making Fields Required
Checking Fields against Each Other
Identifying Problem Fields
Putting Form Validation into Action
Working with Radio Buttons
Setting One Field with Another
Validating Zip Codes
Validating Email Addresses

Return to Chapter 7

To use this script on your own page, click in the text area below, select all, and copy to grab the script. Then, just paste into your own page — and you're done.

Working with Radio Buttons

See it run: Working with Radio Buttons

Script 7.12

When working with radio buttons, only one radio button in a group may be checked, and this JavaScript is there to enforce the user 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";
			}
		}
	}
}