FormWalker – walking through form fields with the enter key

By | April 16, 2007

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:

  1. <input class="next" />

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:

  1. <input class="myFreakyClass next" />

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

4 comments on “FormWalker – walking through form fields with the enter key

  1. Michal on said:

    forgot to say … at least prototype version 1.5 should be used.

  2. so – theres no key defined to submit the form, right?

    are the users of “conventional” business applications used to use the mouse after editing?

    I would love some kind of switch, which could automatically be attached to every form on the page so users can decide whether to use the “common approach” or the “gablib approach” :-)

    cheers!

  3. Michal on said:

    switching would be no problem. add buttons one which loads (FormWalker.load()) it and another one which remove the onkeydown eventhandler of each field…

  4. Max MISTRY on said:

    I am testing the ExtJS library for a project. can you guide me on how to include this feature in it?

Leave a Reply to Michal Cancel reply

*

* Copy This Password *

* Type Or Paste Password Here *

135,371 Spam Comments Blocked so far by Spam Free Wordpress