| Table of Contents | Previous Next |
10.3 Multiple checkboxes and radio boxes10.3.1 Using multiple checkboxesAnother programming tool to get user input and associated with the HTMLinputElement interface is the checkbox. This is an ideal feature to handle multiple selections on an options list. To control them, or to detect whether the boxes have been checked, you use the property "checked" as defined by the interface in ex10-02.txt. For example, if you have a checkbox defined as <input type="checkbox" id="myCheckBox"> you can use the following script statement to check whether the box has been checked:
document.getElementById("myCheckBox").checked
This statement returns a true value if the box has been checked. Multiple checkboxes can be set up in this way to handle multiple selections. To control and to access multiple checkboxes, let's consider the following page to collect data on your favorite browsers.
Example: ex10-05.htm - A Page To Collect Data On Favorite Browsers
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <style>
6: .styleSt{width:320px;height:35px;background:#aaffaa;font-family:arial;
7: font-weight:bold;font-size:14pt;color:#880000}
8: .tableSt{font-size:14pt;font-weight:bold;text-align:left}</style>
9: <head><title>Your Favorite Browsers ex1005.htm</title></head>
10:
11: <body style="background:#000088;font-family:arial;color:#ffff00">
12:
13: <table class="tableSt" style="position:absolute;top:30px;left:60px">
14: <tr><td colspan="2" style="text-align:center;font-size:22pt">
15: Your Favorite Browsers<br /><br /></td></tr>
16: <tr><td>Name: </td>
17: <td><input type="text" value="" class="styleSt" id="nameId"
18: style="color:#000000;background:#dddddd"/></td></tr>
19: <tr><td>Email Address: </td>
20: <td><input type="text" value="" class="styleSt" id="emailId"
21: style="color:#000000;background:#dddddd"/></td></tr>
22: </table>
23:
24: <table class="tableSt" style="position:absolute;top:230px;left:60px">
25: <tr><td>Internet Explorer: </td>
26: <td><input type="checkbox" class="styleSt" id="chk0"
27: style="width:40px" /></td></tr>
28: <tr><td>Netscape 6.+: </td>
29: <td><input type="checkbox" class="styleSt" id="chk1"
30: style="width:40px" /></td></tr>
31: <tr><td>Netscape Navigator: </td>
32: <td><input type="checkbox" class="styleSt" id="chk2"
33: style="width:40px" /></td></tr>
34: </table>
35:
36: <table class="tableSt" style="position:absolute;top:230px;left:340px">
37: <tr><td>Opera: </td>
38: <td><input type="checkbox" class="styleSt" id="chk3"
39: style="width:40px" /></td></tr>
40: <tr><td>KDE (LINUX): </td>
41: <td><input type="checkbox" class="styleSt" id="chk4"
42: style="width:40px" /></td></tr>
43: <tr><td>Others: </td>
44: <td><input type="checkbox" class="styleSt" id="chk5"
45: style="width:40px" /></td></tr>
46: </table>
47:
48: <table class="tableSt" style="position:absolute;top:400px;left:100px"><tr>
49: <td><input type="button" class="styleSt" style="width:200px;
50: background:#aaaaaa" value="Reset" onclick="resetPar()"/></td>
51: <td><input type="button" class="styleSt" value="Send" id="proDataBut"
52: style="width:200px;background:#aaaaaa" onclick="proData()" /></td></tr>
53: <tr><td colspan="2"><div id="outMsg" style="width:400px;height:60px">
54: </div></td></tr>
55: </table>
56: </body>
57: <script src="ex1005.js"></script>
58: </html>
This page has four tables. The first table in lines 1322 contains two text fields to collect information for "Name" and "Email Address." The second table defined in lines 2434 generates a column of three checkboxes with identities chk0, chk1, and chk2 <input type="checkbox" class="styleSt" id="chk0" style="width:40px" /> <input type="checkbox" class="styleSt" id="chk1" style="width:40px" /> <input type="checkbox" class="styleSt" id="chk2" style="width:40px" /> representing browser selections "Internet Explorer," "Netscape 6.+," and "Netscape Navigator." Another column of checkboxes is defined in a separate table in lines 3646. These two columns of checkboxes are arranged side by side with position settings. Two action buttons and a display area are also defined by using a table as shown in lines 4855. When the Send button is clicked, all the information on "Name," "Email Address," and checked boxes is displayed in the display area. You also use the disabled attribute of the input interface to disable the Send button. The Reset button can be used to restore all the parameters to their original values. Some screen shots of this example are shown in Figs 10.10 and 10.11. Figure 10.10. ex10-05.htm
Figure 10.11. Collecting browser data
The program part of this example is given in ex10-05.js.
Example: ex10-05.js - The ECMAScript For ex1005.htm
1: var noChkBox=6
2: function resetPar()
3: {
4: document.getElementById("nameId").value=""
5: document.getElementById("emailId").value=""
6: document.getElementById("outMsg").innerHTML=""
7: document.getElementById("proDataBut").disabled=false
8: for (jj=0;jj<noChkBox;jj++)
9: {
10: chkB = "chk"+jj
11: document.getElementById(chkB).checked = false
12: }
13: }
14:
15: chkArr = new Array("Internet Explorer","Netscape 6.+",
16: "Netscape Navigator","Opera","KDE (LINUX)","Others")
17:
18: function proData()
19: {
20: llSt = "Name: "+document.getElementById("nameId").value +"<br />"
21: llSt = llSt + "Email: "+ document.getElementById("emailId").value +
22: "<br />"+"Browsers: "
23: for (jj=0;jj<noChkBox;jj++)
24: {
25: chkB = "chk"+jj
26: if (document.getElementById(chkB).checked )
27: llSt = llSt + chkArr[jj] + ", "
28: }
29: document.getElementById("outMsg").innerHTML = llSt
30: document.getElementById("proDataBut").disabled=true
31: }
The resetPar() function is easy to understand. The first job of this function is to clear any messages in "Name," "Email Address," and the display area. After enabling the Send button in line 7, a for-loop is executed to uncheck all the checkboxes. In this example, no direct information is provided to link the checkboxes and their corresponding values. We need to find a way to provide it ourselves. For this purpose, an array is defined in lines 1516, i.e., chkArr[0] = "Internet Explorer" ,..., chrArr[5]= "Others" This array is employed inside the function proData(). After the "Name" and "Email Address" data, the for-loop in lines 2328 is used to run through all the checkboxes. If the jjth checkbox is checked, the associated array element chkArr[jj] representing the corresponding value of the checkbox is added to the display string llSt. You output the display string llSt by executing the statement in line 29. The Send button is disabled before the end of the function. Some people may prefer to put the selection data into the checkbox element as a value such as <input type="checkbox" class="styleSt" id="chk0" style="width:40px" value="Internet Explorer" /> A simple function call to the function getElementById("chk0").value would return the data. Using the array as in this example has the advantage that data can be changed easily. 10.3.2 Controlling radio boxesThe checkbox may be an ideal tool to handle multiple selections. But for a multiple-choice application in which only one answer can be picked, the radio box is surely a better tool. Compared to the radio box, the checkbox has a different access scheme. Thanks to the W3C, you now have a universal technique to access them. This method is referred to as "Collection" and is an important subject for the remainder of this chapter. As a simple application, we consider a page that allows users to pick a free gift. The coding fo s
Example: ex10-06.htm - Radio Boxes
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <style>
6: .styleSt{width:320px;height:35px;background:#aaffaa;font-family:arial;
7: font-weight:bold;font-size:14pt;color:#880000}
8: .radSt{width:320px;height:35px;background:#aaffaa;font-family:arial;
9: font-weight:bold;font-size:14pt;color:#880000;width:30px;height:30px}
10: .tableSt{font-size:14pt;font-weight:bold;text-align:left}</style>
11: <head><title>Radio Boxes ex1006.htm</title></head>
12: <body style="background:#000088;font-family:arial;color:#ffff00">
13: <form action="">
14: <table class="tableSt" style="position:absolute;top:30px;left:120px">
15: <tr><td colspan="2" style="font-size:18pt;text-align:center">
16: A Simple Example On Radio Boxes<br />
17: Please Pick Your Free Gift<br /><br /></td>
18: <tr><td>A Portable DVD Player: </td><td><input type="radio"
19: class="radSt" id="radB" name="radB" checked /></td></tr>
20: <tr><td>A Digital Camera: </td>
21: <td><input type="radio" class="radSt" id="radB" name="radB" /></td></tr>
22: <tr><td>Car Rental For One Week: </td>
23: <td><input type="radio" class="radSt" id="radB" name="radB" /></td></tr>
24: <tr><td>An Air Ticket To Spain: </td>
25: <td><input type="radio" class="radSt" id="radB" name="radB" /></td></tr>
26: <tr><td colspan="2"><br /><input type="button" class="styleSt"
27: onclick="getData()" value="Send" style="width:100px"</td></tr>
28: <tr><td colspan="2"><br /><div id="outMsg" name="outMsg"></div></td></tr>
29: </table>
30: </form>
31: </body>
32: <script>
33: choiceArr = new Array("A Portable DVD Player","A Digital Camera",
34: "Car Rental For One Week", "An Air Ticket To Spain")
35:
36: function getData()
37: {
38: llV = document.getElementsByName("radB")
39: for (jj=0;jj<llV.length;jj++)
40: {
41: if (llV.item(jj).checked) llSt = choiceArr[jj]
42: }
43: document.getElementById("outMsg").innerHTML = "Your Have Picked: "+ llSt
44: }
45: </script>
46: </html>
The table in lines 1429 generates four radio boxes and each of them has the exact format <input type="radio" class="radSt" id="radB" name="radB" /> All four radio boxes have the same name, "radB." It is essential to define radio boxes with the same name so that only one box can be selected. In this example, the table and hence the radio boxes are inside a form element defined in lines 1330. This arrangement is necessary only for some browsers that cannot interpret radio boxes as individual elements. Traditionally, input elements are embedded in the form element. More details about form structure and element collection are given in the next chapter. Once the Send button is pressed, the function getDate() is called. Inside this function, there is another important function provided by the DOM called getElementsByName(),. The main duty of this function is to collect all elements with the same name and return them as a collection similar to an array. The statement in line 38
llV = document.getElementsByName("radB")
is used to collect all the radio boxes and return them as a collection called llV. The llV.length property contains the length of the collection and the item() function can be used to access the boxes. For example, llV.item(2) represents the third radio box and llV.item(2).checked represents the check status of the box. Sometimes, the item() function is integrated into the browser as an array structure and can be called by llV[2].checked The item() function is formally declared inside the interface specification provided by W3C's DOM. Now, the for-loop in lines 3942 is a loop to run through all radio boxes and to detect which one is checked. The checked box data are assigned to llSt and output to the screen via the statement in line 43. A screen shot of this example is shown in Fig. 10.12. Figure 10.12. ex10-06.htm
10.3.3 A page to obtain personal dataOne of the common applications of text fields, buttons, checkboxes, and radio boxes is as a page to obtain personal data. A simple but effective page to obtain user data is often vital to many database type applications since not many visitors would like to fill in a complicated form. The following is a simplified version of an example to collect user data for a dating agency. Based on this example, a page matching new friends or companions will be introduced at the end of this chapter. This data collection page has the display shown in Fig. 10.13. Figure 10.13. ex10-07.htm
From Fig. 10.13, you can see the following fields:
One efficient way to lay out these items is to use a table. Using a table for each item has the advantage that it can be placed anywhere independently. For example, you can implement the first two text fields as one table. The "Sex" field (two radio boxes) can be implemented as another table as shown in the listing ex10-04.txt. Listing: ex10-04.txt - A Table With Two Radio Boxes 1: <table class="tableSt" style="position:absolute;top:230px;left:220px"> 2: <tr><td colspan="2" style="text-align:center">Sex<br /><br /></td> 3: <tr><td style="width:120px">Female: </td> 4: <td><input type="radio" class="radSt" id="sex" name="sex" /></td></tr> 5: <tr><td>Male: </td> 6: <td><input type="radio" class="radSt" id="sex" name="sex" /></td></tr> 7: </table> This is a table with two radio boxes. The tables for "Age Group," "Hobby," "Your Location," and "Nationality" are similar and you perhaps don't want to write five similar tables in one page. Can you program them in a more professional and compact manner? If you separate all components of the table into changeable and fixed keywords, you will find that the table in ex10-04.txt can be generated by the function genTable(): function genTable(topV,leftV,widthV,noElV,eleArr,titleV,typeV,idV) where the arguments are:
In particular, the "Sex" table (ex10-04.txt) can be generated by
sexArr = new Array("Female","Male")
genTable(230,220,120,2,sexArr,"Sex",1,"sex")
Similarly, all other tables, "Age Group," "Hobby," "Your Location," and "Nationality," are just simple function calls to genTable(). More precisely, we have
ageArr = new Array("(1728)","(2942)","(4358)","(59+)")
genTable(230,420,120,4,ageArr,"Age Group",1,"age")
hobArr = new Array("Reading","Movies","Cooking","Sports")
genTable(230,620,120,4,hobArr,"Hobby",2,"hob")
locArr = new Array("New York","Tokyo","London","Paris","Others")
genTable(450,220,120,5,locArr,"Your Location",1,"loc")
natArr = new Array("American","Japanese","British","French","Others")
genTable(450,420,120,5,natArr,"Nationality",1,"nat")
A general function like this is highly reusable and could be quite handy in your programming life to increase productivity. Note that you have used typeV=2 in the "hobby" table, indicating that checkboxes are used. The current design of the page is shown below.
Example: ex10-07.htm - A Page To Collect Data
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <style>
6: .styleSt{width:320px;height:35px;background:#aaffaa;font-family:arial;
7: font-weight:bold;font-size:14pt;color:#880000}
8: .radSt{width:320px;height:35px;background:#aaffaa;font-family:arial;
9: font-weight:bold;font-size:14pt;color:#880000;width:30px;height:30px}
10: .tableSt{font-size:14pt;font-weight:bold;text-align:left}</style>
11: <head><title>A Page To Collect Data ex1007.htm</title></head>
12: <script src="ex10-07.js"></script>
13: <body style="background:#000088;font-family:arial;color:#ffff00">
14:
15: <table class="tableSt" style="position:absolute;top:30px;left:220px">
16: <tr><td colspan="2" style="text-align:center;font-size:22pt">
17: Join Our Database To Meet New Friends<br /><br /></td></tr>
18: <tr><td>Name: </td>
19: <td><input type="text" value="" class="styleSt" id="nameId"
20: style="color:#000000;background:#dddddd"/></td></tr>
21: <tr><td>Email Address: </td>
22: <td><input type="text" value="" class="styleSt" id="emailId"
23: style="color:#000000;background:#dddddd"/></td></tr>
24: </table>
25:
26: <script>
27: genTable(230,220,120,2,sexArr,"Sex",1,"sex")
28: genTable(230,420,120,4,ageArr,"Age Group",1,"age")
29: genTable(230,620,120,4,hobArr,"Hobby",2,"hob")
30: genTable(450,220,120,5,locArr,"Your Location",1,"loc")
31: genTable(450,420,120,5,natArr,"Nationality",1,"nat")
32: </script>
33:
34: <table class="tableSt" style="position:absolute;top:500px;left:620px"><tr>
35: <td><input type="button" class="styleSt" style="width:120px;height:60px;
36: background:#aaaaaa" value="Reset" onclick="resetPar()"/></td></tr>
37: <tr><td><input type="button" class="styleSt" value="Send" id="proDataBut"
38: style="width:120px;height:60px;background:#aaaaaa" onclick="proData()" />
39: </td></tr>
40: </table>
41:
42: <div id="outMsg" class="tableSt" style="position:absolute;top:690px;
43: left:120px;font-size:16pt"></div>
44: </body>
45: </html>
In order to show different varieties of coding, we use the XHTML table and the genTable() function in this example. The table in lines 1524 generates the "Name" and "Email Address" text fields. The script block in lines 2731 calls the genTable() function to generate "Sex," "Age Group," "Hobby," "Your Location," and "Nationality" tables. They all use radio boxes with the exception of the "Hobby" table, which uses checkboxes. The final XHTML table in lines 3440 generates two buttons called "Reset"and "Send." There is also a display area defined by the division element in lines 42 43 so that messages can be displayed there. The Reset button calls the function resetPar() (clear parameter) to clear all the text fields and boxes. The Send button calls the function proData() (process data) to get all the selected data and to display them in the display area. A screen shot of this example is shown in Fig. 10.13. This example uses an ECMAScript ex10-07.js in line 12. The first part of this program is listed below.
Example: ex10-07.js - The ECMAScript For ex1007.htm (Part One)
1: sexArr = new Array("Female","Male")
2: ageArr = new Array("(17-28)","(29-42)","(43-58)","(59+)")
3: hobArr = new Array("Reading","Movies","Cooking","Sports")
4: locArr = new Array("New York","Tokyo","London","Paris","Others")
5: natArr = new Array("American","Japanese","British","French","Others")
6:
7: function genTable(topV,leftV,widthV,noElV,eleArr,titleV,typeV,idV)
8: {
9: boxType=""
10: if ((typeV ==1)|| (typeV ==2))
11: {
12: tabSt= "<table class=\"tableSt\" style=\"position:absolute;top:" +
13: topV+"px;left:"+leftV+"px\">"
14: tabSt= tabSt + "<tr><td colspan=\"2\" style=\"text-align:center\">"+
15: titleV+"<br /><br /></td>"
16:
17: if (typeV ==1) boxType ="radio"
18: else boxType ="checkbox"
19: for(jj=0;jj<noElV;jj++)
20: {
21: tabSt = tabSt+ "<tr><td style=\"width:"+widthV+"px\">"+
22: eleArr[jj]+": </td><td><input type=\"" + boxType +
23: "\" class=\"radSt\" name=\""+idV+"\" /></td></tr>"
24: }
25: tabSt = tabSt +"</table>"
26: document.write(tabSt)
27: }
28: }
29:
Lines 15 define the arrays for "Sex," "Age Group," "Hobby," "Your Location," and "Nationality." The function genTable() generates a table with radio or checkboxes. When typeV=1, this function produces a table with radio boxes and checkboxes when typeV=2. If the box type is not equal to 1 or 2, nothing will happen. The format of the generated table is very similar to the table in ex10-04.txt and is stored in the variable tabSt (table string). Once you know the box type, the for-loop in lines 1924 adds all the boxes to the table string. The generated tables are then output to the page by executing the statement in line 26. The second part of the program file contains a resetPar() function to clear all the data fields and prepare for the next input. The coding is listed below.
Listing: Continuation Of The ECMAScript ex1007.js (Part Two)
30: sexV = document.getElementsByName("sex")
31: ageV = document.getElementsByName("age")
32: hobV = document.getElementsByName("hob")
33: locV = document.getElementsByName("loc")
34: natV = document.getElementsByName("nat")
35:
36: function resetPar()
37: {
38: document.getElementById("nameId").value=""
39: document.getElementById("emailId").value=""
40: document.getElementById("outMsg").innerHTML=""
41:
42: for (jj=0;jj<sexV.length;jj++)
43: {
44: sexV.item(jj).checked = false
45: }
46: for (jj=0;jj<ageV.length;jj++)
47: {
48: ageV.item(jj).checked = false
49: }
50: for (jj=0;jj<locV.length;jj++)
51: {
52: locV.item(jj).checked = false
53: }
54: for (jj=0;jj<natV.length;jj++)
55: {
56: natV.item(jj).checked = false
57: }
58: for (jj=0;jj<hobV.length;jj++)
59: {
60: hobV.item(jj).checked = false
61: }
62:
63: }
64:
To clear all the boxes, the codes in lines 3034 demonstrate a grouping technique. For example, the DOM function getElementsByName() is employed in line 30 to build a collection of all elements with the name="sex" and store the collection in variable sexV. Once we have the object variable sexV, the for-loop (lines 4245)
for (jj=0;jj<sexV.length;jj++)
{
sexV.item(jj).checked = false
}
would clear all the settings of the radio boxes. A series of for-loops would uncheck all the boxes in this example. Since sexV is an object, sexV.length stores the number of radio boxes and the function sexV.item(jj) is a legal and efficient way to gain access to the jjth radio box. The final part of the program file contains a function proData() to process the data and is listed below.
Listing: Continuation Of The ECMAScript ex1007.js (Part Three)
65: function proData()
66: {
67: nameSt = document.getElementById("nameId").value
68: emailSt = document.getElementById("emailId").value
69:
70: llSt = "##Input Data##:"+nameSt+", "+emailSt+"<br /> "
71: llSt = llSt + "##Input Data##:"
72: for (jj=0;jj<sexV.length;jj++)
73: {
74: if (sexV.item(jj).checked) llSt = llSt +sexArr[jj]+", "
75: }
76: for (jj=0;jj<ageV.length;jj++)
77: {
78: if (ageV.item(jj).checked) llSt = llSt + ageArr[jj]+", "
79: }
80: for (jj=0;jj<locV.length;jj++)
81: {
82: if (locV.item(jj).checked) llSt = llSt + locArr[jj]+", "
83: }
84: for (jj=0;jj<natV.length;jj++)
85: {
86: if (natV.item(jj).checked) llSt = llSt + natArr[jj]+", "
87: }
88: for (jj=0;jj<hobV.length;jj++)
89: {
90: if (hobV.item(jj).checked) llSt = llSt + hobArr[jj]+", "
91: }
92:
93: document.getElementById("outMsg").innerHTML = llSt
94: }
95:
When the Send button is pressed, this proData() function is called. After obtaining the "Name" and "Email Address" data and storing them into a string llSt (lines 6771), a series of for-loops is executed to check all the boxes on the entire page. If the check status of a box is true, the associated array data is added to the string llSt. For example, consider the for-loop in lines 7679:
for (jj=0;jj<ageV.length;jj++)
{
if (ageV.item(jj).checked) llSt = llSt + ageArr[jj]+", "
}
This loop runs through all radio boxes that are associated with the age group. If the checked status of a radio box ageV.item(jj).checked is true, the associated data stored in the array ageArr[jj] are added to the string llSt. Since this element collection method is a W3C standard for all input elements, the checkboxes in lines 8891 can also be collected in this way. |
| Table of Contents | Previous Next |
