Skip to main content
L
laurens5318199
Participating Frequently
October 11, 2022
Answered

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

  • October 11, 2022
  • 2 replies
  • 1333 views

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:

Correct answer Nesa Nurani

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.)


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;

2 replies

Thom Parker
Community Expert
Thom ParkerCommunity Expert
Community Expert
October 11, 2022

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

 

 

Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often
Nesa Nurani
Community Expert
Nesa NuraniCommunity Expert
Community Expert
October 11, 2022

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?

    L
    laurens5318199Author
    Participating Frequently
    October 11, 2022

    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
    Community Expert
    Nesa NuraniCommunity Expert
    Community Expert
    October 11, 2022

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices