noob - jumping to next select box
 

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.

Re: noob - jumping to next select box
 

Steve Lefevre wrote:
> 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/domr...f.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.

Re: noob - jumping to next select box
 

On Sat, 18 Sep 2004 14:50:12 +1000, Fred Oz <ozfred@iinet.net.auau> wrote:

[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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Re: noob - jumping to next select box
 

"Fred Oz" <ozfred@iinet.net.auau> wrote in message
news:414bbedf$0$24397$5a62ac22@per-qv1-newsreader-01.iinet.net.au...
> >
>
> 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 ;)


>
> > 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)


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

>
> 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.
>
>

Re: noob - jumping to next select box
 

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

Cheers, Fred

Re: noob - jumping to next select box
 

"Fred Oz" <ozfred@iinet.net.auau> wrote in message
news:414cd90d$0$24403$5a62ac22@per-qv1-newsreader-01.iinet.net.au...
> 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.

Re: noob - jumping to next select box
 

"Fred Oz" <ozfred@iinet.net.auau> wrote in message
news:414cd90d$0$24403$5a62ac22@per-qv1-newsreader-01.iinet.net.au...
> 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?