This tutorial shows how to automatically jump to the next text field when the prior field is complete using conditional logic and the OnKeyUp event.

Conditional Logic Tutorial

Auto-Tab Fields

Detect Number Of Characters Entered

Your phone number and social security fields may never be the same.

First, open AutoTab.rp and open the "Auto-Tab" page.

Select the first text field and add a case to the OnKeyUp event.  In the Case Editor, click Add Condition to open the Condition Builder.

In the Condition Builder, setup the row to read "If length of widget value AreaCode equals value 3".

Click OK to close the Condition Builder.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

(AxureAutoTab.zip)

This zip file contains the RP file needed to complete this tutorial

Select "Set Focus on Widget"  in the Case Editor and click the checkbox for MiddleDigits.

Click OK to close the Case Editor.

Repeat steps 1 through 3 for the MiddleDigits text field.  The condition will be for the MiddleDigits text field, and the action will be to set focus on LastDigits text field.

On the LastDigits text field, add an OnKeyUp case, and this time set the condition to "Length of widget value LastDigits equals value 4".

Click OK to close the Condition Builder.

In the Case Editor, select the "Show Panel" action and click the checkbox for SubmitPanel.

Now when a user enters the 4th digit in the text box, the hidden dynamic panel containing the Submit button will show.

Generate a prototype and test it out.

Step 1: Add OnKeyUp case

Step 2: Build the condition

Step 3: Set focus on the next field

Step 4: Repeat for MiddleDigits text field

Step 5: Add condition for LastDigits text field

Step 6: Add "Show Panel" action

Next: Droplist Selection Tutorial

Back to Conditional Logic