Checks, Radios, and Javascript Don Bellenger TeraTech 301-294-8580.
-
Upload
amy-murphy -
Category
Documents
-
view
217 -
download
0
Transcript of Checks, Radios, and Javascript Don Bellenger TeraTech 301-294-8580.
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?