noob - jumping to next select box

[Steve Lefevre]

Hey folks --

I have a series of selectboxes on a web form. I would like to have a
javascript jump the focus to the next selectbox when the user presses a key.
Each box has the values 1 through 6-9, depending. So normally someone who is
used to it can just hit 1 <tab> 3<tab> 5<tab>1<tab>9<tab> -- I'd like to
take the tabbing out.

So what's really nice is if the box doesn't jump when the user doesn't
select a proper value.

I've been looking at java scripts and I'm not sure how to reference the next
selectbox, or how to check that the key pressed was in the proper range. Can
someone help me out?

Here's what FireFox's WebDeveloper .8 says about my form:

Form
Id Name Method Action
questions post ./shop_report.php

Elements
Id Name Type Value
1 select
2 select
3 select
4 select
5 select
6 select
7 select
8 select
9 select
10 select
...

through about 200 or so.

 

[Fred Oz]

I have a series of selectboxes on a web form. I would like to have a
javascript jump the focus to the next selectbox when the user presses a key.
Each box has the values 1 through 6-9, depending. So normally someone who is
used to it can just hit 1 <tab> 3<tab> 5<tab>1<tab>9<tab> -- I'd like to
take the tabbing out.

You are after the element tabIndex property, have a look here:

http://www.mozilla.org/docs/dom/domref/dom_el_ref.html#1002691

So what's really nice is if the box doesn't jump when the user doesn't
select a proper value.

How can they not select a "proper value"? Perhaps you should
look at making sure the content of the select is only valid
values, rather than pestering the user if they can't guess what
is "proper" and what isn't.

I've been looking at java scripts and I'm not sure how to reference the next
selectbox, or how to check that the key pressed was in the proper range. Can
someone help me out?

Use the tabIndex property to control navigation. There is also
an item index (look for "item" method at the above reference):

element.item(index)

but that is based on the order the elements are placed in the
DOM tree and may not be the same order as your required
tabIndex.

 

[Michael Winter]

[snip]

Use the tabIndex property to control navigation. There is also
an item index (look for "item" method at the above reference):

element.item(index)

but that is based on the order the elements are placed in the
DOM tree and may not be the same order as your required
tabIndex.

That documentation is either proprietary, or wrong. Elements do not have
an item method; collections do. Even then it is preferable to use
subscripting as not all browsers may support the item and namedItem
methods.

Mike

 

[Steve Lefevre]

How can they not select a "proper value"? Perhaps you should
look at making sure the content of the select is only valid
values, rather than pestering the user if they can't guess what
is "proper" and what isn't.

What I mean is that I don't think I should use the KeyPress event, because
proper values are only 1 through 6 to 9. So one box might be 1-7, and maybe
the user hits '8', or 'g'. I don't want it jumping to the next box in that
case.

So, yes, the select box does have only proper values in it, but the keyboard
doesn't

Use the tabIndex property to control navigation. There is also
an item index (look for "item" method at the above reference):

element.item(index)

Can I pass the index as a variable? Or can I just reference the select box
name, passed as a variable to the function?

 

[Fred Oz]

Post a brief sample that shows what you are trying to do,
otherwise we are just guessing...

Cheers, Fred

 

[Steve Lefevre]

Post a brief sample that shows what you are trying to do,
otherwise we are just guessing...

The following is the description from the grandparent thread. I don't have
any code attemps, because, like I say, I'm a noobie

I have a series of selectboxes on a web form. I would like to have a
javascript jump the focus to the next selectbox when the user presses a key.
Each box has the values 1 through 6-9, depending. So normally someone who is
used to it can just hit 1 <tab> 3<tab> 5<tab>1<tab>9<tab> -- I'd like to
take the tabbing out.

So what's really nice is if the box doesn't jump when the user doesn't
select a proper value.

I've been looking at java scripts and I'm not sure how to reference the next
selectbox, or how to check that the key pressed was in the proper range. Can
someone help me out?

Here's what FireFox's WebDeveloper .8 says about my form:

Form
Id Name Method Action
questions post ./shop_report.php

Elements
Id Name Type Value
1 select
2 select
3 select
4 select
5 select
6 select
7 select
8 select
9 select
10 select
...

through about 200 or so.

 

[Steve Lefevre]

Post a brief sample that shows what you are trying to do,
otherwise we are just guessing...

Aw, heck, here's a brief, non-java psue-code attempt at what I'm after

on KeyUp(MoveToNext)

MoveToNext{
if ( selected_value is in_selectbox_values ) {
goto form.elements.next()
}
}

Dig?