How to Use JavaScript in Acrobat to Show or Hide Fields Based on Two Dropdowns
Question details
The user needs a method to dynamically show or hide a target field in a PDF form using JavaScript, dependent on the selected values of two different dropdown fields.
- Product
- Adobe Acrobat
- Device & OS
- not provided
- Scenario
- Creating dynamic and interactive PDF forms where the visibility of specific fields is conditional based on multiple user selections.
- Observed behavior
- The target field needs to become visible only when both Dropdown A and Dropdown B match specific values; otherwise, it should remain hidden from the user.
Ensure you are using Adobe Acrobat Pro or a PDF editor that fully supports JavaScript form calculations, and make a backup copy of your PDF form before applying custom scripts.
Add a Custom Calculation Script to the Target Field
Apply a custom JavaScript calculation directly to the field you want to show or hide, which will evaluate the dropdown values in real-time.
This method utilizes the target field's own calculation event. It constantly checks the states of your chosen dropdown menus and dynamically adjusts its own visibility property based on the conditions you define.
Launch Adobe Acrobat, open your PDF document, and select the 'Prepare Form' tool from the right-hand pane to enter editing mode.
Right-click the target field (the text box or element you want to dynamically show or hide) and select 'Properties' from the context menu.
In the Properties dialog box, go to the 'Calculate' tab and choose the 'Custom calculation script' option.
Click the 'Edit' button and paste the following script: var A = this.getField('Dropdown A').valueAsString; var B = this.getField('Dropdown B').valueAsString; if (A == 'this' && B == 'that') event.target.display = display.visible; else event.target.display = display.hidden;
Replace 'Dropdown A', 'Dropdown B', 'this', and 'that' with your exact field names and required dropdown export values. Click 'OK' and close the properties window to test your form.
Edit and Manage PDF Forms Easily with WPS Office
WPS Office provides a comprehensive PDF editor that allows you to view, fill, and manage interactive PDF forms effortlessly without needing expensive software.
- 1. Download and Install: Get WPS Office from the official website and open the built-in WPS PDF application.
- 2. Open Your PDF Form: Import your interactive PDF form directly into the WPS PDF editor.
- 3. Fill and Save: Easily fill out text fields, make dropdown selections, and manage your document interactively before saving or sharing.
Frequently Asked Questions
Can I trigger the visibility based on just one dropdown field instead of two?
Yes. You can simplify the script by removing the second variable and updating the 'if' statement to check only one condition, such as: if (this.getField('Dropdown A').valueAsString == 'this') event.target.display = display.visible;
Why isn't my target field hiding when the dropdown conditions aren't met?
Ensure you have placed the custom calculation script in the 'Calculate' tab of the target field's properties, not in the dropdown's properties. The target field needs to evaluate its own calculation event whenever form data changes.
What if I need to check three or more dropdown menus?
You can extend the JavaScript by defining additional variables (e.g., var C = this.getField('Dropdown C').valueAsString;) and appending them to your if-statement using the '&&' operator, like: if (A == 'this' && B == 'that' && C == 'other').
How do I find the exact export values for my dropdown fields?
Right-click your dropdown field in Prepare Form mode, select Properties, and navigate to the 'Options' tab. The 'Export Value' column shows the exact text string you must use in your JavaScript code.
