2. PHPRunner General questions
  3. [SOLVED]  How to change tab order when tabbing through fields?
This topic is locked
[SOLVED]

 How to change tab order when tabbing through fields?

 		6/5/2015 11:00:38 AM
PHPRunner General questions
D
 dodgebros author

I changed the layout of my ADD page for a table by added two new columns so that it has labels/fields side by side now.
When tabbing thru the fields instead if going all the way down a column it jumps left to right in the same row then down to the next row.
I saw in an old, locked post that one solution was to add a second table and put some of the fields in it as that way it tabs all the way thru one table then goes to the second table. I tried adding the second table in Visual Editor but could not find a way to have it line up side by side to the existing table.
Two questions:

  1. How can I add a second table side by side to the existing table in the Visual Editor?
  2. Is there a better solution to this whole issue of setting tab order for fields?
    Thanks,

    TD
Admin 6/5/2015

Tab order (unless specified explicitly) is decided by the web browser and is normally goes from left to right, the way people read in left-to-right languages.
What you can do is to add a Javascript OnLoad event and in that event change the tab order the way you like it. See code samples at http://stackoverflow.com/questions/3772438/set-the-tab-index-dynamically-in-javascript
D
 		dodgebros author 6/5/2015



Tab order (unless specified explicitly) is decided by the web browser and is normally goes from left to right, the way people read in left-to-right languages.
What you can do is to add a Javascript OnLoad event and in that event change the tab order the way you like it. See code samples at http://stackoverflow.com/questions/3772438/set-the-tab-index-dynamically-in-javascript


OK, I looked at the html for the ADD page in the Visual Editor to determine the element id for each field.
So, as in the example, which is

"document.getElementById("link3").tabIndex = 6;"
I have

"document.getElementById("$pid_editcontrol").tabIndex = 1;"

and this doesn't work so I assume it doesn't work because I am using the wrong element id. So how would I know what the correct element id is for each field?
Thanks,

TD
Admin 6/6/2015

Use Chrome or Firefox Developer Tools to figure out the ID of each field in runtime.
For instance, on this screenshot you can see that id of Last Name field is value_LastName_1
D
 		dodgebros author 6/6/2015



Use Chrome or Firefox Developer Tools to figure out the ID of each field in runtime.
For instance, on this screenshot you can see that id of Last Name field is value_LastName_1




I used the Inspector tool in Firefox and feel pretty sure I got the correct id's this time and it still isn't working.
Don't forget this table has four columns with label, field, label, field for each row. I want the user to be able to tab their way down the first column of fields then tab over and go down the second column of fields. Below is the Javascript code I placed in the "Javascript OnLoad Event".
TD



document.getElementById("value_tracking_number_10").tabIndex = "1";

document.getElementById("monthvalue_initiation_date_11").tabIndex = "-1";

document.getElementById("dayvalue_initiation_date_11").tabIndex = "-1";

document.getElementById("yearvalue_initiation_date_11").tabIndex = "-1";

document.getElementById("monthvalue_initiation_date_12").tabIndex = "-1";

document.getElementById("dayvalue_initiation_date_12").tabIndex = "-1";

document.getElementById("yearvalue_initiation_date_12").tabIndex = "-1";

document.getElementById("value_zf_location_10").tabIndex = "2";

document.getElementById("value_customer_code_10").tabIndex = "3";

document.getElementById("value_supplier_location_10").tabIndex = "4";

document.getElementById("value_supplier_code_10").tabIndex = "5";

document.getElementById("value_8D_status_10").tabIndex = "6";

document.getElementById("value_customer_ncf_12").tabIndex = "7";

document.getElementById("value_internal_ncf_12").tabIndex = "8";

document.getElementById("value_supplier_ncf_12").tabIndex = "9";

document.getElementById("value_audit_ncf_12").tabIndex = "10";

document.getElementById("value_prevention_12").tabIndex = "11";

document.getElementById("value_supplier_perf_12").tabIndex = "12";

document.getElementById("value_enviro_ncf_12").tabIndex = "13";

document.getElementById("value_safety_ncf_12").tabIndex = "14";


The fields with a negative tabIndex value are date fields that should have a tab stop.
D
 		dodgebros author 6/8/2015



I used the Inspector tool in Firefox and feel pretty sure I got the correct id's this time and it still isn't working.
Don't forget this table has four columns with label, field, label, field for each row. I want the user to be able to tab their way down the first column of fields then tab over and go down the second column of fields. Below is the Javascript code I placed in the "Javascript OnLoad Event".
TD



document.getElementById("value_tracking_number_10").tabIndex = "1";

document.getElementById("monthvalue_initiation_date_11").tabIndex = "-1";

document.getElementById("dayvalue_initiation_date_11").tabIndex = "-1";

document.getElementById("yearvalue_initiation_date_11").tabIndex = "-1";

document.getElementById("monthvalue_initiation_date_12").tabIndex = "-1";

document.getElementById("dayvalue_initiation_date_12").tabIndex = "-1";

document.getElementById("yearvalue_initiation_date_12").tabIndex = "-1";

document.getElementById("value_zf_location_10").tabIndex = "2";

document.getElementById("value_customer_code_10").tabIndex = "3";

document.getElementById("value_supplier_location_10").tabIndex = "4";

document.getElementById("value_supplier_code_10").tabIndex = "5";

document.getElementById("value_8D_status_10").tabIndex = "6";

document.getElementById("value_customer_ncf_12").tabIndex = "7";

document.getElementById("value_internal_ncf_12").tabIndex = "8";

document.getElementById("value_supplier_ncf_12").tabIndex = "9";

document.getElementById("value_audit_ncf_12").tabIndex = "10";

document.getElementById("value_prevention_12").tabIndex = "11";

document.getElementById("value_supplier_perf_12").tabIndex = "12";

document.getElementById("value_enviro_ncf_12").tabIndex = "13";

document.getElementById("value_safety_ncf_12").tabIndex = "14";


The fields with a negative tabIndex value are date fields that should have a tab stop.


FYI I didn't mark this post as [SOLVED}, someone else did. I finally gave up and created three tabs on the ADD/EDIT/VIEW forms each then I spread the fields across the three tabs.
TD