Beginning JavaScript

Textareas, Checkboxes and Radio Buttons

Try It Out – Checkboxes and Radio Buttons

Let's look at an example that makes use of all the properties, methods, and events we have just talked about. The example is a simple form, which allows a user to build a computer system. Perhaps it could be used in an e-commerce situation for buying computers online with the exact specification determined by the customer.

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> var radCpuSpeedIndex = 0; function radCPUSpeed_onclick(radIndex) { var returnValue = true; if (radIndex == 1) { returnValue = false; alert("Sorry that processor speed is currently unavailable"); document.form1.radCPUSpeed[radCpuSpeedIndex].checked = true; } else { radCpuSpeedIndex = radIndex; } return returnValue; } function butCheck_onclick() { var controlIndex; var element; var numberOfControls = document.form1.length; var compSpec = "Your chosen processor speed is "; compSpec = compSpec + document.form1.radCPUSpeed[radCpuSpeedIndex].value; compSpec = compSpec + "\nWith the following addtional components\n"; for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++) { element = document.form1[controlIndex]; if (element.type == "checkbox") { if (element.checked == true) { compSpec = compSpec + element.value + "\n"; } } } alert(compSpec); } </SCRIPT> </HEAD> <BODY> <FORM NAME=form1> <P> Tick all of the components you want included on your computer <BR><BR> <TABLE> <TR> <TD>DVD-ROM</TD> <TD><INPUT TYPE="checkbox" NAME=chkDVD VALUE="DVD-ROM"></TD> </TR> <TR> <TD>CD-ROM</TD> <TD><INPUT TYPE="checkbox" NAME=chkCD VALUE="CD-ROM"></TD> </TR> <TR> <TD>Zip Drive</TD> <TD><INPUT TYPE="checkbox" NAME=chkZip VALUE="ZIP Drive"></TD> </TR> </TABLE> <P> Select the processor speed you require <TABLE> <TR> <TD><INPUT TYPE="radio" NAME=radCPUSpeed CHECKED onclick="return radCPUSpeed_onclick(0)" VALUE="800 MHz"></TD> <TD>800 MHz</TD> <TD><INPUT TYPE="radio" NAME=radCPUSpeed onclick="return radCPUSpeed_onclick(1)" VALUE="1 GHz"></TD> <TD>1 GHz</TD> <TD><INPUT TYPE="radio" NAME=radCPUSpeed onclick="return radCPUSpeed_onclick(2)" VALUE="1.5 GHz"></TD> <TD>1.5 GHz</TD> </TR> </TABLE> </P> <INPUT TYPE="button" VALUE="Check Form" NAME=butCheck onclick="return butCheck_onclick()"> </FORM> </BODY> </HTML>

Save the page as ch6_examp6.htm and load it into your web browser. You should see a form like the one below:

Tick some of the checkboxes, change the processor speed and hit the Check Form button. A message box will appear giving details of which components and what processor speed you selected. For example, if you select a DVD-ROM and a Zip Drive, and 1.5GHz processor speed, you will see the following:

Note that the 1 GHz processor is out of stock, so if you choose that, a message box will appear telling you that it's out of stock, and the 1 GHz processor speed radio button won't be selected. The previous setting will be restored once the user dismisses the message box.

Whitepapers and eBooks

Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications
Adobe Article: Java Developers Finding a Home at Adobe Flex
IBM Articles: A Smarter Business Needs Smarter Technology
Intel Xeon Processor Increases Server Efficiency and Capabilities
Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise
Oracle Whitepaper: Using Oracle In-Memory Database Cache to Accelerate the Oracle Database
Oracle Whitepapers - Innovation for IT Leaders
Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking
Internet.com eBook: Get Ready for Windows 7
Microsoft Article: Expression Web 3--New Features for PHP Developers
Whitepapers: Manage Your Business Infrastracture with IBM
Whitepaper: Maximize Your Storage Investment with HP
Internet.com eBook: Becoming a Better Project Manager
Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Downloads and eKits

Tutorials and Demos