How to Conditionally Show PDF Form Fields and Layers Using JavaScript
Question details
The user needs a method to dynamically reveal a hidden form field and an optional content layer in a PDF document only when a specific numerical condition is met in another input field.
- Product
- PDF Editor
- Device & OS
- not provided
- Scenario
- Creating an interactive PDF form where dependent fields and elements (like the 'Width' field and 'Layer 2') stay hidden until a user enters a value greater than 5 into the trigger field ('Length').
- Observed behavior
- The dependent field and layer must actively switch their visibility state from hidden to visible based on the live input data of the trigger field.
Ensure that your PDF editing software supports JavaScript for interactive form validations and verify the exact names of your target form fields and Optional Content Groups (OCGs) before applying the script.
Apply a Custom Validation Script to the Trigger Field
Use JavaScript within the trigger field's properties to evaluate the inputted number and programmatically toggle the visibility of both the dependent field and the specific content layer.
By binding a custom JavaScript validation to the 'Length' field, the PDF viewer will evaluate the code every time the field's value changes. The script calculates a boolean condition and uses it to update the display property of the 'Width' field and the state property of 'Layer 2'.
In your PDF form editor, right-click the 'Length' field (the field that users will interact with) and select 'Properties' from the context menu.
Switch to the 'Validate' tab in the Properties dialog box and select the option to 'Run custom validation script'.
Click the 'Edit' button and paste the following code: `var show = Number(event.value) > 5; this.getField('Width').display = show ? display.visible : display.hidden; var ocgs = this.getOCGs(); if (ocgs) { for (var i in ocgs) { if (ocgs[i].name == 'Layer 2') { ocgs[i].state = show; break; } } }`.
Click 'OK' to save the script, close the properties window, and exit form editing mode to test the logic by entering numbers higher and lower than 5.
Easily Create Interactive PDF Forms with WPS Office
WPS Office provides robust PDF editing tools, allowing you to create advanced interactive forms, configure field properties, and manage document layers efficiently without needing expensive specialized software.
- 1. Open Your PDF: Launch WPS Office and open the PDF document containing your form fields.
- 2. Access Form Tools: Navigate to the 'Form' tab on the top ribbon to reveal the interactive field creation and editing features.
- 3. Edit Field Properties: Double-click your desired text field to open its properties, where you can easily configure appearance, actions, and validation settings.
- 4. Save Document: Once your configuration is complete, save the document to preserve your interactive form logic.
Frequently Asked Questions
What is an OCG in a PDF document?
OCG stands for Optional Content Group, which is the technical term for a 'layer' in a PDF. Elements assigned to an OCG can be toggled visible or hidden programmatically via JavaScript or manually via the Layers panel in a PDF viewer.
Why doesn't the layer hide when the user clears the value in the Length field?
If the field validation requires a specific event like pressing 'Enter' or losing focus, simply deleting the value might not immediately trigger the script. You may need to ensure 'Commit selected value immediately' is checked in the field options, or attach the script to a Keystroke event instead of Validation.
How do I ensure the field hides again when the form is cleared or reset?
Because the validation script only runs when the trigger field's value changes, a form reset might bypass it. You should attach a custom Document Action script or add an explicit script to your 'Reset Form' button that manually sets `this.getField('Width').display = display.hidden;` and reverts the OCG state.
Can I conditionally show multiple fields using the same script?
Yes. You can duplicate the `this.getField('FieldName').display` line for as many form fields as you need to control. Simply replace 'FieldName' with the exact names of your additional target fields.
