Java script, tab order and read only fields (accessible form)

[james_2757]

I am creating a PDF form for my employer. The form has certain points where your answer decides whether you continue or stop, using JavaScript to turn on/off read only status for certain fields.
The first two decision points are dropdown lists:

• You can move to the next question if you answer "No" to the first dropdown; if "Yes", the form is complete (all other fields set to read only).
• If you answer "Yes" to the second dropdown, you can proceed to answer the next two questions. If "No", form is complete (all other fields are read only).

The third decision point is a text/number field. The decision is based on a calculation:

• If the amount in the Family_adjusted_gross_income field is higher than the Exclusion_amount field, the rest of the fields open (read only switched off) for you to complete.

The Exclusion_amount is calculated based on family size.
By default, all fields after the first dropdown are read-only. Based on your answer, the next question(s) unlock (read only switched off) or remain locked/read only) This continues step by step.
We are a state agency serving people with disabilities, and many of our staff also have disabilities. Accessibility—especially keyboard accessibility—is critical for us. Our resources are limited. We are in the process of working with a contractor for a new online case management system that would be able to handle this and other forms as HTML forms, but we are still a year+ out from that becoming live.
The issue:
The form works fine for me on two different computers running Windows 10 and the most recent version of Acrobat DC Pro. But some of my co-workers, who also use Windows 10 and the latest Acrobat DC Pro, are experiencing problems.
They select an answer in the first dropdown and press Tab to move to the next field.
The next field unlocks as expected, but the cursor jumps back to the first field instead of moving forward.
If they press Enter before pressing Tab, it works correctly.
The problem also happens at the third decision point (a text field), even though other text fields work fine. Meaning that in this text field only, they have to press enter after entering the dollar amount BEFORE tabbing to the next field, or it will jump back to the beginning of the form. No other text fields require them to press enter, they can just type the response and press tab to move to the next field.
I believe the issue is related to the JavaScript (JS) controlling read-only status, but I don't know how to fix it.
During testing with multiple staff, about half of my coworkers can tab through the form with no issue, while the other half experience the issue(s) described above.
Here’s a simplified version of the JavaScript that I am using to switch on/off the read-only status (adapted from a script I found on this forum:

switch(event.value) {

case "Yes":
this.getField("Receives_non_exempt_services").readonly = true;
// Repeat this for all read-only fields

case "No":
this.getField("Receives_non_exempt_services").readonly = false;
// the other fields past this remain read-only

default:
this.getField("Receives_non_exempt_services").readonly = true;
// Repeat for all read-only fields (default state)

}

I can’t find a solution that doesn’t cause other issues, and I don’t know why it only affects some computers, but others have no issue. What I need is a solution that will reliably allow all users to tab through the fields without focus jumping back to the top of the form. 

At first, I thought I could just tell them to use Enter to select the option in the dropdowns before tabbing to the next field, but then I noticed that it also affects the text field that uses the JS too. 
If anyone can help, I’m happy to share the form through PM. Thanks!

[try67]

You must add a break command in the end of each case code block (except for the default one).

[james_2757]

Thank you. The break command was included, but you mentioned that it should be at the end of each case code block EXCEPT for the default one... I just looked and I have a break at the end of each block, INCLUDING the default.

Just so I understand, you're saying to remove the break from the default block?

[james_2757]

Oh, also--the calculation for the third "decision point" as I mentioned is a text/number field rather than a dropdown. I use a slightly different script for it. Instead of the case code block, I am using the below custom calculation script. This field also will NOT tab to the next field after it meets the criteria and switches off the read only status (in this case, it meets the criteria, all remaining fields switch read only to OFF.. It won't let some users TAB to the next question unless they press Enter first here too.

var Income = this.getField("Family_adjusted_gross_income").value;
var Exclusion = this.getField("Exclusion_amount").value;
if (Income - Exclusion <= 0) {

this.getField("Non_exempt_Physical_mental_restoration").readonly = true;
this.getField("Non_exempt_Tuition_and_registration").readonly = true;
this.getField("Non_exempt_Maintenance").readonly = true;
this.getField("Non_exempt_Services_family_members").readonly = true;
this.getField("Non_exempt_License_tools_equipment").readonly = true;
this.getField("Non_exempt_Computers").readonly = true;
this.getField("Non_exempt_Other").readonly = true;
this.getField("Non_exempt_Est_Vehicle_property").readonly = true;
this.getField("Non_exempt_Cost_vehicle_property_changes").readonly = true;
this.getField("Non_exempt_Est_Hearing_aids").readonly = true;
this.getField("Non_exempt_Cost_Hearing_aids").readonly = true;
this.getField("Total_non_exempt").readonly = true;
this.getField("DRE_Physical_restoration").readonly = true;
this.getField("DRE_Medical_devices").readonly = true;
this.getField("DRE_Medical_supplies").readonly = true;
this.getField("DRE_Health_insurance").readonly = true;
this.getField("DRE_Mental_restoration").readonly = true;
this.getField("DRE_Transportation").readonly = true;
this.getField("DRE_IRWE").readonly = true;
this.getField("DRE_Self_employment").readonly = true;
this.getField("DRE_Vehicle").readonly = true;
this.getField("Total_DRE").readonly = true;
this.getField("Available_income").readonly = true;
this.getField("Percent_participation").readonly = true;
this.getField("Annual_max_percent").readonly = true;
this.getField("Consumer_maximum_contribution").readonly = true;
this.getField("Estimated_consumer_cost").readonly = true;
}

else {

this.getField("Non_exempt_Physical_mental_restoration").readonly = false;
this.getField("Non_exempt_Tuition_and_registration").readonly = false;
this.getField("Non_exempt_Maintenance").readonly = false;
this.getField("Non_exempt_Services_family_members").readonly = false;
this.getField("Non_exempt_License_tools_equipment").readonly = false;
this.getField("Non_exempt_Computers").readonly = false;
this.getField("Non_exempt_Other").readonly = false;
this.getField("Non_exempt_Est_Vehicle_property").readonly = false;
this.getField("Non_exempt_Cost_vehicle_property_changes").readonly = true;
this.getField("Non_exempt_Est_Hearing_aids").readonly = false;
this.getField("Non_exempt_Cost_Hearing_aids").readonly = true;
this.getField("Total_non_exempt").readonly = true;
this.getField("DRE_Physical_restoration").readonly = false;
this.getField("DRE_Medical_devices").readonly = false;
this.getField("DRE_Medical_supplies").readonly = false;
this.getField("DRE_Health_insurance").readonly = false;
this.getField("DRE_Mental_restoration").readonly = false;
this.getField("DRE_Transportation").readonly = false;
this.getField("DRE_IRWE").readonly = false;
this.getField("DRE_Self_employment").readonly = false;
this.getField("DRE_Vehicle").readonly = false;
this.getField("Total_DRE").readonly = true;
this.getField("Available_income").readonly = true;
this.getField("Percent_participation").readonly = true;
this.getField("Annual_max_percent").readonly = true;
this.getField("Consumer_maximum_contribution").readonly = true;
this.getField("Estimated_consumer_cost").readonly = true;

}

[try67]

Re break command: It was not included in the code you posted, hence my remark.

You can add it to the "default" clause if you wish, but it has no effect, as there are no other cases after it.

Re tabbing issues: I don't see how your code could be causing that, unless you use the setFocus command somewhere. It would be easier to help you if you could share the file with the code you're using with us.

[james_2757]

Thank you, and no problem... it was just a snippet of the code, so the break didn't get included. My apologies. I appreciate all the help I can get ;).  So based on your response here, removing the break after the default will likely not be the answer?

I don't have a set focus command. We did test with a set focus command to see if that helped, but it caused other issues... perhaps we had it in the wrong place though... 

I'll attach the form here in its current state. 

As I mentioned, it works as expected for me... on two different machines. I was able to replicate the issue, though, using a MacBook and Acrobat Pro. For staff who have used it, about half or so have had the issue, and the rest have no issue... That's the part that confuses me the most, why it works for some, but not for others...

Also, keep in mind that we need this to be accessible from the keyboard, as some of our staff do not use a mouse, for example blind screen reader users or those with mobility impairments that are unable to use a mouse...

[PDF Automation Station]

Which field are you having the tab issue with?  Everything seems to be working correctly at my end.

[james_2757]

Thank you for looking. It works for me too on PC, and for most of my staff. But for others it doesn't. I was also able to replicate the issue using a MacBook and Acrobat.

[PDF Automation Station]

It looks like the issue is what I guessed about the next field being readonly when the tab key is pressed so it won't tab to it because the dropdown selection has not been committed at that point.  Here's the fix:

Add the following script at the end of the script in Receives_SSI_SSDI:
this.getField("Receives_non_exempt_services").setFocus();
Add the following script at the end of the script in Receives_non_exempt_services:
this.getField("Family_size").setFocus();

[james_2757]

I did this--on my computer (which was working perfect in the original version) it now does the following when I add the set focus script(s):

I enter a date and tab--focus immediately jumps to Family Adjusted Gross Income (which is still read only because the decision point that switches that off hasn't occurred yet.

On my macbook--I enter the date and can tab to First Name. I enter first name and press tab, it loses focus altogether. I press tab again, it skips last name and goes to counselor. I enter counselor and press tab, it skips case number and goes to the yes/no dropdown about updated form, etc. 

Perhaps I placed the set focus in the wrong spot? Attached is the updated version. Thank you for all your help on this..

[PDF Automation Station]

It works perfectly for me.  Are you using a physical keyboard?  Are your coworkers who are having the issue?

[james_2757]

We are using PCs and laptops with Windows 10. Everyone I checked with is using Acrobat Pro (2025.001.20435). The original version (before adding the setFocus function) worked fine for me. But once I added setFocus to the suggested fields, I started having issues.

Temporary Workaround

• I removed the setFocus function from the script.
• I changed the auto-calculated fields so they are no longer always read-only.

How It Works Now

• By default, all fields after the SSI/SSDI verification question are read-only.
• The user selects a response from the dropdown and presses Enter. If they don’t press Enter before tabbing, the focus moves back to the date field.
• If the user selects No, the next question becomes editable. They must press Enter to commit their response before they can tab to the next field.
• If the user selects Yes to the non-exempt services question, the Family Size and Family Adjusted Gross Income (FAGI) fields become editable.
• Entering a family size (up to 10) automatically calculates the exception amount.
• The user then tabs to the FAGI field.
• If the FAGI amount exceeds the Exclusion Amount, all remaining fields become editable.

Even though I set the dropdown to commit the selected value immediately, Acrobat doesn’t recognize if you just simply tab out of the field. Pressing Enter appears to be required. This also affected the FAGI field, likely because the Exception Amount field was still read-only?

When I tested on my MacBook, using the arrow keys in the dropdown expanded the list, prompting me to press Enter to select an answer. However, on my Windows machine, arrowing down only cycled through options without expanding the list. This difference helped me realize that pressing Enter was necessary for Acrobat to register the selection properly.

So now the form works for everyone, and I will add in the instruction that they need to press enter after selecting an option from the dropdowns before tabbing to the next field.

Thanks to both of you @PDF Automation Station  and @try67 , for all your help. I greatly appreciate your taking a look and for your quick responses.  Also an additional thanks to @try67... I found the case code block script to use for the dropdowns on another post in this board that you provided to another user. 

[PDF Automation Station]

A possibility:  A readonly field can't be tabbed into so if all fields are readonly except the one with the focus, pressing the tab key will simply return the focus to that field.  Values are committed on a blur action (when the field loses focus).  When pressing tab the blur event is when the focus enters the next field.  If there is no other field to tab into the values are never committed when pressing the tab key.  That's why pressing Enter works.  Also, clicking the mouse anywhere outside of the field is a blur event, which will also commit the values.

[try67]

That's a good point. If you're setting all other fields as read-only then Tab won't work (as there's nowhere else to tab to) and the On Blur script won't execute. One solution for that is to create a small, transparent field that does nothing (say a button field), so you could always tab to it. You have to make sure it's not hidden or set as read-only, though.

[PDF Automation Station]

Adding setFocus() (to the next field in the tabbing order) to the end of the script, might work as well if this is the issue because setFocus() works on readonly fields.

[james_2757]

Thank you. We had considered it had something to do with the read only state, but what confused us (and still does) is that it works for some of us, but not for others... meaning some of us can tab with no issues, and others not.

[try67]

Are you sure those people are using Adobe software to open the file? Other viewers might be behaving differently (and incorrectly)...

[james_2757]

Yes, lol! That was a whole other issue... But I have verified that their using acrobat... via a Teams meeting w/screenshare. And as I mentioned earlier--I was able to recreate it using a MacBook and acrobat.

[PDF Automation Station]

In the options tab of the dropdown, do you have "Commit selected value immediately" checked?  Is your script a calculation, a keystroke, or a validation script?

[james_2757]

Yes, dropdowns are set to commit immediately. The script is a custom calculation script.

[PDF Automation Station]

A much easier way to write your calculation script:

var fld=this.getField("Receives_non_exempt_services");
event.value=="No"?fld.readonly=false:fld.readonly=true;

[try67]

A much more clear way to do that is this:

fld.readonly = (event.value!="No");

[PDF Automation Station]

Touché