How to Show or Hide PDF Form Fields with Push Button JavaScript
Question details
The user needs to conditionally control the visibility of a PDF form button based on the active state of a primary button using JavaScript.
- Product
- PDF Editor
- Device & OS
- not provided
- Scenario
- Configuring interactive PDF forms where a secondary control (UPS IN0.0) should only be visible if the primary control (UPS ON0.0) is set to 'ON'.
- Observed behavior
- A custom script is required to handle the visibility logic by checking the value of the primary button and updating the display property of the secondary button.
Make sure you have access to a PDF editor with advanced form authoring and JavaScript capabilities, and verify that your target form fields are named exactly as referenced in your script.
Add a Mouse-Up JavaScript Action to the Form Button
Apply a custom JavaScript action that triggers when the user clicks the primary button, seamlessly updating the secondary button's visibility.
To make a form field dynamically appear or disappear, you need to assign a script to the control that dictates the condition. The 'Mouse Up' trigger is standard for button clicks in PDF forms.
Additionally, the same logic should be applied when the document first opens so that the initial visibility matches the default state of the primary button.
Enter the form editing mode in your PDF software. Right-click the primary button (named 'UPS ON0.0') and select 'Properties' from the context menu.
In the Properties dialog box, click on the 'Actions' tab. Set the 'Select Trigger' dropdown to 'Mouse Up'.
From the 'Select Action' dropdown, choose 'Run a JavaScript' and click the 'Add' button.
In the JavaScript Editor window, enter the following code: var state = this.getField("UPS ON0.0").valueAsString; this.getField("UPS IN0.0").display = state == "ON" ? display.visible : display.hidden;
To ensure the secondary button isn't improperly displayed when the PDF is first opened, go to the Document Level JavaScripts or Page Properties (Page Open trigger) and add the exact same script.
Easily Manage and Edit PDF Forms with WPS Office
WPS Office provides a highly capable PDF viewer and editor, allowing you to fill, manage, and interact with complex PDF forms seamlessly without the need for expensive software.
- 1. Download and Install WPS Office: Get the free WPS Office application from the official website and install it on your computer or mobile device.
- 2. Open Your PDF Document: Launch WPS Office, click on 'Open', and locate the interactive PDF form you want to fill or test.
- 3. Interact with Form Fields: Navigate to the PDF tab. The software will automatically highlight fillable fields and interactive buttons for you to click and edit.
- 4. Save the Document: Once your form is filled out and the buttons have been toggled to your preferred state, go to 'Menu' and click 'Save' to preserve your changes.
Frequently Asked Questions
Why is my PDF form JavaScript not working when I click the button?
First, ensure that JavaScript execution is enabled in your PDF viewer's security or trust preferences. Second, verify that the field names in your script (like 'UPS ON0.0') exactly match the names of the form controls, as they are strictly case-sensitive.
Can I hide multiple fields with one button click?
Yes, you can extend the script by adding additional lines targeting different fields. Simply repeat the 'this.getField("FieldName").display = ...' logic for each additional control you want to manipulate within the same Mouse Up action.
Does the JavaScript run automatically when the PDF is opened?
Not automatically for form field triggers like Mouse Up. To ensure the fields display correctly based on their default values upon opening the file, you must add a document-level JavaScript or a 'Page Open' action with the same visibility logic.
What is the difference between display.hidden and display.noPrint?
Using 'display.hidden' makes the field completely invisible on the screen and on paper. Using 'display.noPrint' keeps the field visible on the screen for the user to interact with, but prevents it from showing up when the document is printed.
