Navigating a multi-step form using arrow keys?

Question

I have a 5 panel multi step form that uses divs 'previous' and 'next' to navigate through. I would like to make it so hitting a left arrow key acts as clicking the previous button, but hitting the right arrow key will act as hitting right.

I have this working.. Sort of.

I have bind(ed) my arrow keys correctly, but since it's going off of class name, it wants to tab through every single one of them. Is there a way to do it so it only activates the one that is on the <fieldset> currently displaying?

<input type="button" name="previous" class="previous action-button" value="Previous" />

//binds left/right for navigation
$(window).bind('keydown', function(e){

    if (e.keyCode==37) {
        $(".previous").trigger("click");
    } else if (e.keyCode==39) {
        $(".next").trigger("click");
    };
});

Have you tried finding which field (and thus which fieldset) has the focus? — Mike Brant, Jul 16 '15 at 19:03
give id to fieldset and use , `$("#id input.previous")` or `$("fieldset input.previous")` — manoj, Jul 16 '15 at 19:05
How would I go about that? Would I check it with `$("fieldset").is(":focus")` or would each one need a class name? — knocked loose, Jul 16 '15 at 19:06

score 0 · Answer 1 · answered Jul 16 '15 at 19:45

0

Since everything is working already. I would suggest
to have a different class name, for your particular interested elements, & trigger click on them only
so that it does tab only those.

Best of luck.

(Mark this as answer if it serves your need)

answered Jul 16 '15 at 19:45

Manohar Reddy Poreddy

25,399
9
157
140

I've already thought of doing this, but there has to be a way to do it that is a little more elegant than this. – knocked loose Jul 16 '15 at 19:47
Its elegant if you do like this, in your CSS: .classname1, .classname2 {...} – Manohar Reddy Poreddy Jul 16 '15 at 19:49

Navigating a multi-step form using arrow keys?

1 Answers1