How to Toggle PDF Field Visibility and Border Colors Using Acrobat JavaScript
Question details
The user needs to create an interactive button in a PDF that toggles both its own border color and the visibility of specific form fields using JavaScript.
- Product
- Adobe Acrobat / PDF
- Device & OS
- not provided
- Scenario
- Creating interactive PDF forms with dynamic button states and field visibility.
- Observed behavior
- The goal is to alternate the button's border between red and transparent, simultaneously hiding or showing related fields upon each click.
Ensure you have a PDF editing software that supports JavaScript for forms, and verify that all target form fields are already created and accurately named before writing the script.
Use Acrobat JavaScript to Toggle Button Border and Field Visibility
Apply a custom JavaScript action to a button's Mouse Up event to check the current border color and toggle the visibility states of associated form fields.
This solution relies on the PDF JavaScript API. It uses the button's strokeColor property as a conditional trigger to switch between two states: a transparent border with certain fields visible, and a red border with those same fields hidden.
Open your PDF form editor, right-click the interactive button you want to use as the toggle, and select 'Properties'.
Navigate to the 'Actions' tab. Select 'Mouse Up' as the Select Trigger, choose 'Run a JavaScript' from the Select Action dropdown, and click the 'Add' button.
In the JavaScript Editor, enter the conditional code: if (color.equal(event.target.strokeColor, color.transparent)) { event.target.strokeColor = color.red; this.getField("Voidtext1").display = display.hidden; this.getField("Swapupper1").display = display.visible; this.getField("Weightupper1").display = display.visible; } else { event.target.strokeColor = color.transparent; this.getField("Voidtext1").display = display.visible; this.getField("Swapupper1").display = display.hidden; this.getField("Weightupper1").display = display.hidden; }
Click 'OK' to close the JavaScript editor, then click 'Close' on the Properties dialog. Exit form editing mode to test the button's click functionality.
Create and Manage Interactive PDF Forms in WPS Office
WPS Office provides a comprehensive PDF toolkit that allows you to easily design interactive forms, manage field properties, and ensure full compatibility with standard PDF viewers.
- 1. Open your PDF in WPS: Launch WPS Office, go to the PDF tab, and open the document you wish to convert into an interactive form.
- 2. Navigate to the Form tab: Click on the 'Form' tab on the top ribbon to access interactive form controls like buttons and text fields.
- 3. Add Form Controls: Select the 'Push Button' or 'Text Field' tool to draw your interactive elements directly onto the document.
- 4. Modify Properties: Right-click the added control, select 'Properties', and customize the appearance, actions, and visibility states.
Frequently Asked Questions
Why is the PDF button JavaScript not working when clicked?
This typically happens if the field names in your script do not exactly match the actual field names in the document (names are case-sensitive), or if the PDF viewer being used by the reader restricts or does not support JavaScript execution.
Can I toggle other properties besides border color and visibility?
Yes, PDF JavaScript allows you to modify many visual properties dynamically. You can change the field's background color by modifying fillColor, adjust the text color via textColor, or update the button's label using buttonSetCaption.
Does this interactive JavaScript work on mobile PDF viewers?
Many mobile PDF viewers have limited or no support for PDF JavaScript. For the best interactive experience and guaranteed functionality, users should open the form in fully featured desktop applications.
