How to Show or Hide a PDF Form Field Using JavaScript Based on Another Field
Question details
The user wants to use JavaScript to conditionally display a PDF form field only when another specific field contains a value.
- Product
- Adobe Acrobat / LiveCycle Designer
- Device & OS
- not provided
- Scenario
- Creating interactive PDF forms where target fields appear or disappear dynamically based on the input data of a controlling field.
- Observed behavior
- The target field needs to toggle visibility based on whether the controlling field has a non-null, non-empty value, but the correct script depends on the form creation tool used.
Determine whether your PDF form was created in Adobe Acrobat (AcroForm) or Adobe LiveCycle Designer (XFA form), as the JavaScript syntax and document object models differ significantly between the two.
Use JavaScript to Control Field Visibility in Standard Acrobat Forms
Apply a custom JavaScript calculation or validation script to check for empty strings and toggle the target field's display property in standard AcroForms.
Standard PDF forms created in Adobe Acrobat use the Acrobat JavaScript API. To control visibility, you can use the 'display.visible' or 'display.hidden' properties. It is crucial to check for an empty string instead of just a null value, as empty fields in Acrobat usually return an empty string.
Open your PDF in Acrobat, go to the 'Tools' menu, and select 'Prepare Form' to enter editing mode.
Right-click the controlling field (the field the user types into) and select 'Properties'.
Navigate to the 'Calculate' or 'Validate' tab, select 'Custom calculation script', and click 'Edit'.
Enter the script to check the value and set visibility. For example: `if (event.value !== '') { this.getField('TargetFieldName').display = display.visible; } else { this.getField('TargetFieldName').display = display.hidden; }`.
Apply Conditional Visibility in LiveCycle Designer (XFA Forms)
Use FormCalc or JavaScript in LiveCycle Designer to change the presence property of the target field.
Manage and Edit PDF Documents Easily with WPS Office
While advanced JavaScript for XFA forms requires specialized software, WPS Office provides a comprehensive, lightweight, and free alternative for standard PDF viewing, editing, and form filling. It is fully compatible with mainstream document formats and offers an intuitive interface.
- 1. Download and Install: Get WPS Office for free from the official website and install it on your device.
- 2. Open your PDF: Launch WPS Office and open your interactive PDF form.
- 3. Fill and Save: Easily click on form fields to fill in your data, then save or export your completed document.
Frequently Asked Questions
Why isn't my target field hiding when the controlling field is empty?
Ensure your JavaScript checks for an empty string ("") rather than just a null value. In Acrobat, an empty text field usually returns an empty string, so a strict null check will fail to hide the target field.
What is the difference between AcroForms and XFA forms?
AcroForms are standard PDF forms created directly in Adobe Acrobat, utilizing the Acrobat JavaScript API (using properties like display.hidden). XFA forms are XML-based forms created in LiveCycle Designer, which require a different scripting approach (using properties like presence = 'hidden').
Will this JavaScript work on mobile PDF viewers?
Advanced JavaScript form validations and calculations may not be supported on all mobile PDF viewer apps. It is highly recommended to test your interactive forms thoroughly across the specific devices and applications your users will utilize.
