FormWalker - walking through form fields with the enter key

In conventional business applications users are used to navigate through form fields just by using the “enter” key rather than using the “tab” key. Especially on forms where they bung in a lot of numeric data (e.g. sales) it’s more common to use the numeric block (numlock) and therefore the “enter” key is more convenient to use … cause there is no tab key. I’ve just written a short javascript snippet which solves this problem. I call it FormWalking.

It’s a straight forward task so I dont really want to write a lot about (the code is at the bottom for all who cannot wait). What’s important is that it uses the prototypeJS library. Be sure to integrate it when using the FormWalker.

Usage: Just mark all your input fields with the CSS class “next” and the user will be able to “walk” through them (If the last field is reached the first field will be activated. so its kinda loop…). All other fields won’t be touched by the script:

btw for all who dont know: it is possible to use more than one classname, just in case you need your own css class additionally. That would look like this somehow:

At the end of your form you load the FormWalker which will do all the stuff for you (attach the necessary events, etc)

/****
FormWalker - walk form fields using the enter key by just adding the css class “next”
to each field which should be “walkable”.
Michal Gabrukiewicz (FFTUIL - feel free to use it License)
****/
function FormWalker() {}
FormWalker.jumpNext = function(e) {
if (!this.nextElement) return false;
if (((window.event) ? window.event.keyCode : e.keyCode) == Event.KEY_RETURN) {
this.nextElement.activate();
return false;
}
return true;
}
FormWalker.load = function() {
nexts = document.getElementsByClassName(‘next’);
var prev = null;
for (i = 0; i