Maintain and Autotab

By Mark Derwin

There are many times when requiring the user to enter information onto a form that we know the length of the input field. This could be the user’s phone number, social security number, zip code or state, to name a few. Wouldn’t it be nice if after the last character has been entered the cursor jumped to the next field?

The simple JavaScript technique I will now describe does just that.

To start, create your form. You need to know the length of the input and the order of the fields. In my case, I have three fields, Moviecode, Title, and Category. Moviecode is limited to six characters and Title to 10 (see Screen 1).

Now create the JavaScript file. I named mine autot.js. Every time the user presses a key, it is activated. You need to create a variable for each of the input fields that you want to check. Here they are Box1Len and Box2Len.

If the user is in the Moviecode_Edit field, and has entered the sixth character, control is passed to the next field, or the Title field. You can create the code for each field that you want to check. Remember to replace the form an object names with the names of the forms and objects in your application, and that the case is exactly the same. In JavaScript, upper and lower case matter.

//  Limits input in Edit Boxes.  
After nth character 
is entered automatically
//   set focus to next control
document.onkeyup = OnKeyUp;
function OnKeyUp()
{
var CurrentControl = document.
activeElement.id;
var Box1Len = document.Form1.
Moviecode_ Edit.value.length;
var Box2Len = document.Form1.
Title_ Edit.value.length;

if ((CurrentControl == 
"Moviecode_Edit") && (Box1Len > 5))
  {
     var x = String(document.
	 Form1.Moviecode_Edit.value).substr(0,6);
   document.Form1.Moviecode_Edit.value = x;
     document.Form1.Title_Edit.focus();
  }
  else if ((CurrentControl == 
  "Title_Edit") && (Box2Len > 9))
      { 
         var y = String(document.Form1.
		 Title_Edit.value).substr(0,10);
     document.Form1.Title_Edit.value = y;
         document.Form1.Category_Edit.focus();
      }
}

Once the file is created, we have to attach it to the form. To do this, go back to the Desktop and change the properties of the project. Edit the filters so that JS or JavaScript files can be displayed in the project folder. In the Maintain Development environment, make sure you can view both the form and the list of JavaScript files on the desktop. Drag and drop the file onto the form. You are told that it is attached to the form.

That’s it. When you run the application, and enter data into the field, the cursor automatically jumps to the next field.

Update: Dynamic Pop-Up Calendars in Maintain Applications

In the April 2004 issue of the WebFOCUS Newsletter, I wrote a column about dynamic pop-up calendars in Maintain applications. As a follow-up, I thought I would tell you about an important detail that if ignored could cause some trouble. If you are trying to display the pop-up calendar for a computed field, please make sure that the format of the date field is entered in upper case. If the date is in lower or mixed case, the calendar may not appear.