Checks, Radios, and JavascriptChecks, Radios, and Javascript

Don Bellenger

TeraTech

301-294-8580

Overview of this PresentationOverview of this Presentation

Sample search screen

Comparison of Radio Buttons, Check Boxes, DropDowns

Properties of Check Boxes

Javascript makes it work

Use in Search page

Sample Search ScreenSample Search Screen

Radio ButtonsRadio Buttons

Is it OK? o Yes o NoIs it OK? o Yes o No

What color? o Red o Green o BlueWhat color? o Red o Green o Blue

Good for one selection

Least programming

Cold Fusion (CF) for Radio Cold Fusion (CF) for Radio ButtonsButtonsIs it OK?

<CFIF mystatus IS 1>

<INPUT type="radio" name=" mystatus " value="1" CHECKED> Yes

<INPUT type="radio" name=" mystatus " value="0" > No

<CFELSE>

<INPUT type="radio" name=" mystatus " value="1" > Yes

<INPUT type="radio" name=" mystatus " value="0" CHECKED>No

</CFIF>

Check BoxesCheck Boxes

What days can you work? (check all that What days can you work? (check all that apply)apply)

X Mon _Tues X Wed _Thurs X FriX Mon _Tues X Wed _Thurs X Fri

Good for multiple selections

See all options without clicking

Might result in value like daylist=“1,3,5”

CF for Check BoxesCF for Check BoxesDays I can work

<CFIF FindNoCase(”1", daylist) NEQ 0>

<INPUT TYPE="Checkbox" name=”daylist" value=”1" CHECKED>

<CFELSE>

<INPUT TYPE="Checkbox" name=" daylist" value=”1" >

</CFIF>

Monday

Dropdown boxDropdown box

DropDown ConsiderationsDropDown Considerations

Overlays when in use Large text area Scrolling allows hundreds of values Sending hundreds takes time Multiple selections allowed, but method

not as commonly known

CF for DropDownsCF for DropDownsPark

<!--- list of parks, WITH ALL, for selecting --->

<CFSELECT query="application.Parklist" size="1"

NAME="locPark_Code" SELECTED="#locPark_Code#"

VALUE="Park_Code" DISPLAY="Park_Desc">

</CFSELECT>

ComparisonComparison

Radio Buttons best for yes/no

Check Boxes take less space

Familiar for multiple choice

Users see all their selections without clicking

Dropdowns best for many values

Cold Fusion Property of Cold Fusion Property of CheckboxesCheckboxes

They DISAPPEAR!

When not checked, a checkbox is undefined in the action form

For example

<CFIF chk-box-var EQ 0>

gives an error, if the box was not checked!

Action form solutionAction form solution

<!--- CHECK BOXES --->

<CFIF NOT IsDefined("Descending")>

<CFSET Descending = 0>

</CFIF>

<CFIF NOT IsDefined("Incl_accept")>

<CFSET Incl_accept = 0>

</CFIF>

<CFIF NOT IsDefined("Incl_not_accept")>

<CFSET Incl_not_accept = 0>

</CFIF>

JS Properties of Check BoxesJS Properties of Check Boxes

CHECKED (changes display on the screen)

defaultChecked

form

name

type (= “checkbox”)

value (when checked)

Event HandlersEvent Handlers

onClick

onBlur

On Focus (e.g. when tab to it)

Details at

http://www.teratech.com/intranet/javascript

Note: Media Types...Note: Media Types...

Javascript makes it workJavascript makes it work<!--- ALL, Audio-Visual, … ---><INPUT TYPE="Checkbox" name="Media_chk" value="V" CHECKED ONCLICK="if (this.checked) {clearMediaAll()}">

<SCRIPT>function clearMediaAll () {document.MastTabSrchForm.Media_chk[0].checked = false}

</SCRIPT>

JS for “ALL” CheckboxJS for “ALL” Checkboxfunction clearMediaDetails () {

document.MForm.Media_chk[1].checked = false

document.MForm.Media_chk[2].checked = false

document.MForm.Media_chk[3].checked = false

document.MForm.Media_chk[4].checked = false

}

Using Checkbox to build QueryUsing Checkbox to build Query<!--- MediaTypePhrase (A, V, E, F, W) --->

<CFIF NOT FindNoCase("A", Media_chk)>

<!--- not ALL --->

<CFIF FindNoCase("V", Media_chk) NEQ 0>

<CFMODULE TEMPLATE=

"../CustomTags/nps/AppendMedia.cfm"

Media_key="V">

</CFIF>

etc.

SummarySummary

Checkboxes are useful and familiar for site visitors

Javascript makes it smooth

Special coding required

Coding required is not hard, once you have seen it!

Questions?