Adobe Form with Dropdown Menu / Hide and Show Rows based on Input

[laurens5318199]

Hi everyone,

I am working on another quick form—this time with dropdowns.
I am hoping you can help me with the proper script to hide and show each new row when needed.
Row 1: Employee Name () | Item () | Size () | Qty () | Color ()
Based on the user selecting a Color from the dropdown (commit selected value immediately is checked), Row 2 should automatically populate with the 'Add Employee' dropdown, Item dropdown, etc. and repeat this process for as many rows as needed. 

I'll include the dropdown Field Names (E1, N1 etc.) 
note: Qty is the only Field that is not a dropdown.

I would greatly appreciate the help!

Based on User Selections, once Color (C1) is selected, a new row should auto-populate:

Field Names are below:

[Nesa Nurani]

You wrote 'show/hide' later you wrote 'populate', those are two different things.

What I can see from your photos color fields has default value of 'Color' based on that, to show/hide fields from second row you can use this as validation script of "C1" field:

this.getField("E2").display = event.value == "Color" ? display.hidden : display.visible;

Replicate same line for other fields, just change field name.

Is it same with you if user first select 'Color' field before filling other fields, or all fields in a row needs to be populated before second row show?

[laurens5318199]

All fields in a row should be selected beforehand; I figured with the color dropdown coming last, it would be okay to populate the next row based on that single selection. ('Color' is the default selection in the C1 dropdown; the user selects: Orange / Hthr Navy / Royal etc. from there.)

[Nesa Nurani]

Use this as 'Calculation' script of "C1" field:

var e = this.getField("E1").valueAsString;
var n = this.getField("N1").valueAsString;
var s = this.getField("S1").valueAsString;
var q = this.getField("Q1").valueAsString;

if(event.value != "Color" && (e == "Add Employee" || n == "Add Item" || s == "Size" || q == "")){
app.alert("Please fill in all fields in a row before selecting color.");
event.value = "Color";}

EDIT:

This is for alert if all fields in a row are not populated, to show/hide use script I posted above.

[laurens5318199]

Okay, I've added as instructed. Thank you!
I do see it prompting me to fill in all the fields before selecting a color, however, when the color is selected last, the second row of fields do not appear. Do I need to place any scripts or calculations for those based on the C1 calculation script above? (I do have them as 'Hidden' - No calculation scripts or validation script entered for E2, N2, S2, Q2, or C2 yet.)

[Nesa Nurani · Accepted solution]

Yes, you need to add script to "C1" as validation:

this.getField("E2").display = event.value == "Color" ? display.hidden : display.visible;
this.getField("N2").display = event.value == "Color" ? display.hidden : display.visible;
this.getField("S2").display = event.value == "Color" ? display.hidden : display.visible;
this.getField("Q2").display = event.value == "Color" ? display.hidden : display.visible;
this.getField("C2").display = event.value == "Color" ? display.hidden : display.visible;

[laurens5318199]

This worked like a charm, thank you so much for your help, Nesa. Many thanks!

[Thom Parker]

The first thing you can do to make the codeing smooth and efficient is to come up with a field naming convention that organizes the fields in a way that is compatible the required behavior.   For example, since rows are being hidden/shown/populated, prefix the field names with a row number followed by a descriptive field name. 

Ex:  "Row1.Name", "Row1.Item", .....  "Row2.Name", "Row2.Item",  etc.

With this nameing the rows can be handled as a single item. 

You'll find a short discussion and a video on field naming here:

https://www.pdfscripting.com/public/PDF-Form-Scripting.cfm