How to Show or Hide PDF Form Fields Based on Radio Button Selection
Question details
The user needs a method to dynamically display or hide specific text fields in a PDF form depending on which radio button option is selected.
- Product
- Device & OS
- not provided
- Scenario
- Creating an interactive PDF form with conditional logic where user inputs dictate the visibility of subsequent form fields.
- Observed behavior
- Requires a script or configuration to toggle the visibility of multiple text fields when different radio buttons are clicked.
Ensure you have a PDF editor that supports JavaScript for forms, such as Adobe Acrobat Pro. Double-check the exact field names and export values of your radio buttons before writing the script to avoid syntax errors.
Use JavaScript on the Mouse Up Action
Apply a custom JavaScript code to the Mouse Up event of your radio buttons to dynamically control field visibility based on user selection.
To make fields appear or disappear dynamically, you need to assign a script to the radio buttons. When a user clicks and releases the button (Mouse Up), the script checks the button's value and updates the hidden property of the target text fields.
Open your PDF in form editing mode, right-click the radio button group, and select 'Properties' from the context menu.
Navigate to the 'Actions' tab. Select 'Mouse Up' as the trigger, and choose 'Run a JavaScript' as the action, then click 'Add'.
In the JavaScript editor, define your fields and conditions. Example: var q = this.getField("Button"); var a = this.getField("Field1"); var b = this.getField("Field2"); var first = q.value === "R1"; a.hidden = !first; b.hidden = first; (Repeat variables for all fields involved).
Ensure this script is applied to the Mouse Up action of all radio buttons in that specific group so the visibility updates regardless of which option is clicked.
Exit form editing mode and click the radio buttons to verify that the specified text fields show and hide correctly based on the exact export values (e.g., "R1").
Edit and Manage PDF Forms Easily with WPS Office
While advanced JavaScript coding requires specific professional tools, WPS Office provides a highly intuitive PDF editor that allows you to easily view, fill, and manage interactive PDF forms without complex setups.
- 1. Open Your PDF Form: Download and launch WPS Office, then click 'Open' to load your PDF form document.
- 2. Access Form Tools: Navigate to the 'PDF' tab to access standard reading, highlighting, and form-filling tools.
- 3. Interact with Fields: Click directly on form text fields, radio buttons, or checkboxes to interact with them seamlessly.
- 4. Save and Export: Once the form is completed, click 'Save' or use the export options to share your filled document with others.
Frequently Asked Questions
Why is my JavaScript not hiding the PDF form fields?
This usually happens if the field names in your script do not exactly match the actual field names in the form, or if the radio button export values are incorrect. JavaScript is case-sensitive, so double-check all names and capitalization.
Can I use the 'Mouse Down' action instead of 'Mouse Up'?
It is highly recommended to use 'Mouse Up' for form actions. 'Mouse Down' triggers before the value of the radio button officially changes, which can lead to the script evaluating the previous state rather than the newly clicked selection.
How do I find the exact export value of a radio button?
Right-click the radio button in form editing mode, select 'Properties', and go to the 'Options' tab. The 'Radio Button Choice' field displays the exact export value you need to reference in your JavaScript code.
