Radio Buttons and Check Boxes

1
Radio Buttons and Check Boxes
2
Radio Buttons

• Radio button groups allow the use to choose ONE
  choice from a group.
• Since only one radio button can be selected when
  one is selected the previously selected one is
  deseleted.
• If one button is selected as the default at
  startup then a null selection (none selected) is
  not possible
• If no default selection is set and a choice is
  required then you must validate to ensure that
  one has been selected

3
Radio Buttons
ltbodygt lth1gtVisitor Gender Surveylt/h1gt ltform
name"survey" method"POST" action""onsubmit"ret
urn validate()"gt ltpgtNameltinput name"visitor"
type"text" id"visitor" size"40"gtlt/pgt ltpgt
Gender ltinput name"gender" type"radio"
value"Male" checkedgt Male ltinput
type"radio" name"gender" value"Female"gt
Female ltbrgt
named the same are mutually exclusive
4
Dreamweavers Insert Bar

• To add a radio button group to a document
• Place the insertion point within the form
  outline.
• From the form toolbar choose Radio Group
• Fill in the Radio Group options
• Name of group
• Enter each option label
• Enter the value for each option
• Table for easy alignment

5
Table within the Form
Sample code shows groups name (gender), and each
buttons label and value To make a particular
button the default specify checked
lttable width"200"gt lttrgt lttdgtltlabelgt
ltinput type"radio" name"gender"
value"M"gt Malelt/labelgtlt/tdgt lt/trgt
lttrgt lttdgtltlabelgt ltinput
type"radio" name"gender" value"F" checkedgt
Femalelt/labelgtlt/tdgt lt/trgt lt/tablegt
6
JavaScript - Radio Group array

• A Radio group is an array of options
• Refer to page 9 for a description of array
  processing in JavaScript (Javascript book) or
• Tutorial 9 page 9.29(Creating Web pages with HTML
  and XML)
• Arrays
• When referencing an array element specify a
  numeric subscript in square brackets.
• monthlySales3 1000
• Numbering of array elements always begins at zero
• Common to use a loop to step through an array
  processing each element in sequence

7
Option Group and Option properties

• length property the length (number of elements)
  in an array
• myForm.gender.length would be 2
• checked property set to true if the option is
  checked, otherwise false
• if (myForm.gender1.checked true)
• Value returns the value of the specified option
• myForm.gender0.value -- would be M

8
Pseudocode for determining which button is
selected

• loop start i at 0 while i lt elements increment
  i
• if groupNamei.checked is true
• return the value of groupNamei
• end loop

9
JavaScript code

• function showGender()
• var i 0
• var selectedGender ""
• for (i 0 iltdocument.myForm.gender.length
  i)
• if (document.myForm.genderi.checked)
  
• selectedGender document.myForm.genderi
  .value
• alert("selectedGender is " selectedGender)

10
JavaScript Function

• Since this action of determining the value of the
  selected option in a group is so common it would
  be desirable to write a function to do this for
  any given option group on any form
• Function will
• Have 2 parameters
• the name of the form
• The name of the option group
• Return the value of the selected option
• Store this function in a JavaScript library so it
  can be shared and incorporated into any .htm file

11
Creating Reusable Libraries of Code

• To Create the library file
• Can use your favourite editor or using
  Dreamweaver
• File, New, Basic Page, JavaScript
• Add standard documentation to the top of the file
• Add descriptive documentation for each function
• keep the file with a .js extension (i.e.
  myLibrary.js)
• For this course store the library file in the
  root directory

12
Creating Reusable Libraries of Code

• To use the library file
• Add the SCR attribute to the SCRIPT tag in the
  HEAD section in your .html file
• ltscript language"JavaScript" type"text/JavaScrip
  t src"../library.js"gt
• lt/scriptgt
• In Dreamweaver when typing scr you can use
  browse to point to the library file
• NOTE the ltscriptgt tag with .src must not contain
  any javaScript code - its for the library ONLY
• If you want JavaScript code in this section of
  the page include it in another ltscriptgt tag

13
Tying it all together

• Validating Radio Buttons Selection
• Need to validate that the user has selected an
  option
• Validate only required if a default was not set
• Add code to your form validate function to use
  the getRadioValue function
• If the value returned is null then you have and
  error and must generate a message and set the
  focus as before

14
Check boxes

• Checkboxes may be inserted into a form using
  Dreamweavers forms toolbar
• Tables are a handy way of aligning text to appear
  as a label on the left of checkboxes on the right

Series of 5 checkboxes named and assigned values
name value flavour1 V
flavour2 C etc
15
Check box attributes

• name
• Field-name for this checkbox
• value
• Value sent to server if box is checked
• Default value "on"
• Unchecked value null
• checked
• Indicates box is checked on load
• Default cleared

16
Check boxes

• Unlike radio buttons checkboxes arent grouped
• They therefore cant be accessed using group name
  and array subscripts
• Each box has a unique name (i.e. vanilla,
  chocolate, etc.)
• If you would like to treat a series of check
  boxes like a group and process them using loops a
  common practice is to name them with a standard
  name, and append a sequential number to the end,
  example
• flavour1, flavour2, flavour3

17
Use of variable object name

• Recap notation to refer to an object
• if (document.myForm.flavour1 checked)
• Use square braces to convert string to object
• Note no "." before string text reference
• if (document.myFormflavour1".value
  checked)
• same example using a variable
• var myObjectName flavour1
• if (document.myFormmyObjectname.value
  checked)

18
Exercise in class

• Check boxes
• Have a user choose what colour they like
• Choose a Colour, by clicking on the check box

19

• / code a loop to step though each box by
  building a string of checkbox name /
• function checkIcecream()
• var flavourName new Array ("","Vanilla","Choco
  late","Strawberry","Butterscotch",Mint")
• var boxesChecked 0
• var I 0
• var boxName ""
• var message "I like "
• for (i1ilt5i)
• boxName "flavour"i
• if (document.iceCreamboxName.checkedtrue)
• boxesChecked
• message" " flavourNamei
• if (boxesChecked0)

Comparing with checkBox objects flavour1,
flavour2..
19