navigate forms by tabbing checkboxes

tburke · May 17, 2004

(programmer-NOT!)
I am trying to get my staff through checkboxes quickly using tab key.
If the user does not press space bar on 'send out worker' when they press tab ..they skip to placement box. again...if no change 'default of 'no'' in placement box, they skip to transport.etc

Conversely, if any of the checkboxes are checked, (true) they tab through the groups of radio buttons. (or in the case of transport-tab through text fields)

I am sure this is easy but the syntax for a solution escapes me...I stripped out my mangled attempts at javascripting

I have tried several approaches --thanks in advance to anyone taking this on.
on the form...there are 12+ checkboxes and radio box subcategories...here are a few

<body>
Send out Wkr?:
<input TYPE="checkbox" name="cgo" value="yes">Yes<br>
(check all that apply)
<input TYPE="radio" name="whygo" value="sit">sit
<input TYPE="radio" name="whygo" value="transport">transport
<input TYPE="checkbox" name="whygo" value="investigate">investigate
<input TYPE="checkbox" name="whygo" value="other">other reason

Placement?<br>Did you place youth?<br>
<input TYPE="checkbox" name="placement" value="Y">
Foster care/home
<input TYPE="radio" name="placement" value="C">Caretaker/Parent
<input TYPE="radio" name="placement" value="F">Foster Home
<input TYPE="radio" name="placement" value="D">Foster home out-of-district
<input TYPE="radio" name="placement" value="P">Home licensed
<input TYPE="radio" name="placement" value="O">Other

Youth tranported?
<input TYPE="checkbox" name="transp" value="Y">Yes
Non-secure:<br><input TYPE="Text" NAME="f_town" SIZE="20" VALUE="From"><input TYPE="Text" NAME="s_town" SIZE="20" VALUE="To"><input TYPE="Text" NAME="by_who" SIZE="20" VALUE="By">
Secure:<br><input TYPE="Text" NAME="fs_todwn" SIZE="20" VALUE="From"><input TYPE="Text" NAME="ss_town" SIZE="20" VALUE="To"><input TYPE="Text" NAME="sby_who" SIZE="20" VALUE="By">
</td>

</body>
</html>

tviman · May 17, 2004

You could use the onBlur event to call a function that tests, and sets, the values of form elements. Basically:

Send out Wkr?:
<input TYPE="checkbox" name="cgo" value="yes" onBlur="testWkr()";>Yes<br>

and testWkr() would be something like

if (document.formname.cgo.checked == true){
placement_box.value = "no";
document.formname.transp.focus();}

This is crude example but it shows how to check the value of a form field when the field loses focus, sets the value of another field, then sets the foucs on another field element.

There's always a better way. The fun is trying to find it!

tburke · May 19, 2004

Thanks but I am scratching my head. For about 11 hours I have been chewing on this...first, do i understand the logic correctly?

//when user leaves cgo box(onblur), if box is unchecked
//...compares to true, then function checks placement box
// 'no' and then user is ready to click on transport box

if (document.formname.cgo.checked == true){
placement_box.value = "no";
document.formname.transp.focus();}

I have tried this,varying the values, boxes, function..etc one of my many attempts below...

<SCRIPT LANGUAGE=Javascript>
Function testWkr();
If (document.myform.cgo.checked == true){
whygo_box.value = "no";
document.myform.placement.focus();}
</SCRIPT>
------------
May I post a cleaner stripped version that can be copied into homesite that i have been tweaking on a cold fusion web server.
starting in top box, user tabs to Yes box-sent out wkr. if user does not click and instead tabs--should skip to placement box. if user clicks yes at send out wkr, tab sends user to sit, transport, investigate other boxes, then onto placement.

<form name="myform" action="inserttest.cfm" method="POST">
<input TYPE="Text" NAME="start" SIZE="20" VALUE="start here tab next box"><br>

<em><b>Send out SRS Wkr?:</b></em><br>
Yes<input TYPE="checkbox" name="cgo" onblur="testWkr()";>
  <em><b>To: <font size="-1">(check all that apply)</font></b></em><br>
<input TYPE="checkbox" name="whygo1" value="sit" >sit<br>
<input TYPE="checkbox" name="whygo2" value="transport">transport<br>
<input TYPE="checkbox" name="whygo3" value="investigate">investigate<br>
<input TYPE="checkbox" name="whygo" value="other">other<br>
<hr>
Was the youth placed?
Yes<INPUT TYPE="checkbox" name="placement" value="y"><br>
<hr>
Youth transported?
Yes<INPUT TYPE="checkbox" name="transported" value="y"><br>
</p>
<input value="Submit"type="submit">
</body>
</html>

sorry I am dense but I sure have learned more about functions and calling functions...
thanks...

tviman · May 19, 2004

I've got a little project I have to finish today but I'll have this worked out for you tomorrow. Will that work?

There's always a better way. The fun is trying to find it!

tburke · May 19, 2004

I can not thank you enough for taking the time. It is all learning and tomorrow will be fine. As soon as i have it done i will deploy it.

I am surprised more developers (like Allaire) of webpages did not built this feature into checkboxes to save users time.

Again, my thanks for taking the time.
Tom

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

navigate forms by tabbing checkboxes

tburke

Programmer

tviman

Programmer

tburke

Programmer

tviman

Programmer

tburke

Programmer

Similar threads

Part and Inventory Search

Sponsor