noob - jumping to next select box

Discussion in 'Javascript' started by Steve Lefevre, Sep 18, 2004.

  1. 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.
    Steve Lefevre, Sep 18, 2004
    #1
    1. Advertising

  2. Steve Lefevre

    Fred Oz Guest

    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/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.
    Fred Oz, Sep 18, 2004
    #2
    1. Advertising

  3. On Sat, 18 Sep 2004 14:50:12 +1000, Fred Oz <> 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.
    Michael Winter, Sep 18, 2004
    #3
  4. "Fred Oz" <> wrote in message
    news:414bbedf$0$24397$...
    > >

    >
    > 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.
    >
    >
    Steve Lefevre, Sep 18, 2004
    #4
  5. Steve Lefevre

    Fred Oz Guest

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

    Cheers, Fred
    Fred Oz, Sep 19, 2004
    #5
  6. "Fred Oz" <> wrote in message
    news:414cd90d$0$24403$...
    > 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, Sep 19, 2004
    #6
  7. "Fred Oz" <> wrote in message
    news:414cd90d$0$24403$...
    > 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?
    Steve Lefevre, Sep 19, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Koos
    Replies:
    16
    Views:
    4,469
    Mitja
    May 8, 2004
  2. Deniz Bahar
    Replies:
    2
    Views:
    463
    Andrey Tarasevich
    Mar 9, 2005
  3. jalkadir
    Replies:
    3
    Views:
    426
    jalkadir
    Oct 5, 2005
  4. palmiere
    Replies:
    1
    Views:
    396
    Erwin Moller
    Feb 9, 2004
  5. Scott Eade
    Replies:
    1
    Views:
    148
    Scott Eade
    Jul 14, 2005
Loading...

Share This Page