Know which textbox was completed

Question

I have a drop-down list. When an item is selected, five textboxes (all in the same form) appears in the page. One- or two-digit numbers can be entered in those textboxes. After selecting an item in the dropdown list, focus goes to TextBox1. Each time the user press Enter, the form is submitted.

What I want is to move the focus to the proper place after the user press Enter: if user is in TextBox1, after Enter focus moves to Textbox2. If user is entering data in TextBox 3, focus moves to TextBox 4. Or, finally, if user is in TextBox5 (the last one), focus moves to the initial dropdown list.

My problem is that:

1) I cannot use JS onkeydown in each textbox, because user can enter one or two digits in the textbox.

2) I tried with JS onsubmit, but that instruction is for the whole form. How can I know which textbox was completed?

Have you tried setting the tabindex attribute of each textbox? — alfadog67, Dec 18 '14 at 18:27
@Diodeus: with the enter key. The form has a submit button but with the property visibility:hidden, so the user is not aware of it. — CMArg, Dec 18 '14 at 18:32
Look at the answer [here](http://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined). The Enter key is most likely being interpreted as a form submit action by your browser. The solution is to not use a submit button or set the form action, but instead submit the form via JavaScript. — Brett, Dec 18 '14 at 18:33
@alfadog67: nope. I can give it a try. But each time the user press the Enter key, the form is submitted. A Handler.php gets the data and goes back to the form. I don't know how a tabindex could be "remembered" between phps. — CMArg, Dec 18 '14 at 18:35

score 0 · Answer 1 · answered Dec 18 '14 at 18:43

0

You can just use HTML5 validation.

For example, if you use add required to a field which is left empty when the user presses enter to implicitly submit the form, the browser will focus the invalid field and display an error message instead of submitting.

input[type=submit] {
    display: none;
}

<form>
    <input required />
    <input required />
    <input type="submit" />
</form>

answered Dec 18 '14 at 18:43

Oriol

274,082
63
437
513

The code snippet doesn't seem to work, probably because StackExchange interferes. See [live demo](http://jsfiddle.net/sn2xntxm/). – Oriol Dec 18 '14 at 18:50

Know which textbox was completed

1 Answers1