JS: Change tab order of fields on a WebForm

[caspio]

JavaScript Solution: Change tab order of fields on a Submission Form

Feature Description:
Tab index defines the order in which form elements will receive focus when navigated by the user via the keyboard.

This JavaScript solution shows how to change tab order in a Submission Form fields. This is usually used for a multi-column form. A typical situation is, on a two-column form with "Top to bottom" fill order, you would like to change the tab index order from "Left to right" to "Top to bottom".

Implementation:
This solution can be used "as-is", without any changes if
a. It is used in a Submission Form.
b. The fields First_Name, Last_Name, Email and Phone_Number exist in your table and the form.
c. The tab index will be set into First_Name >> Last_Name >> Email >> Phone_Number.

To use this solution,
a. Highlight Header_code provided in the text area shown below and copy it. Paste it inside the HTML Header section of the Submission Form using the Caspio Bridge DataPage Wizard, and
b. Highlight Footer_code provided in the text area shown below and copy it. Paste it inside the HTML Footer section of the Submission Form using the Caspio Bridge DataPage Wizard.

Header Code:

 

<script type="text/javascript">
function changeTabIndex()
{
  document.getElementById('InsertRecordFirst_Name').tabIndex="1";
  document.getElementById('InsertRecordLast_Name').tabIndex="2";
  document.getElementById('InsertRecordEmail').tabIndex="3";
  document.getElementById('InsertRecordWork_Phone').tabIndex="4";
}
</script>

Footer Code:

<script type="text/javascript">
document.addEventListener('DataPageReady', changeTabIndex);
</script>

Tips for Customization
a. To use this script with different field names, change the occurrences of "First_Name", "Last_Name", "Email" and "Work_Phone" in the script to the appropriate field names.
b. To use this script in an Update Form or a Details page of a Search and Report DataPage, replace the prefix "InsertRecord" with "EditRecord" in the code.

Tested Browsers
This JavaScript solution was tested on the following platforms and Internet Browsers only.
# MS Windows - IE 8.0, Firefox 3.6.3, Chrome 4.1, Safari 4.0.5
# Macintosh - Firefox 3.6.3, Safari 4.0.3

Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.