How to Show and Edit a PDF Text Field When a Checkbox is Selected
Question details
The user wants to configure a PDF form checkbox to toggle the visibility and editability of a hidden, read-only text field using JavaScript.
- Product
- Device & OS
- not provided
- Scenario
- Creating an interactive PDF form where text fields dynamically appear and become editable based on user checkbox selections.
- Observed behavior
- The user needs the correct JavaScript logic and display constants to conditionally reveal and unlock the target text field without relying on undefined constants.
Ensure your PDF editing software supports interactive form creation and JavaScript editing, and verify the exact internal names of your checkbox and text fields.
Use JavaScript on the Checkbox Mouse Up Event
Add a custom Mouse Up script to your checkbox to control the target text field using standard PDF JavaScript display constants.
When creating interactive PDF forms, JavaScript allows you to dynamically change field properties. To ensure compatibility across different PDF viewers, you must use the standard constants `display.visible` and `display.hidden` rather than undefined variables.
Open your PDF file in an editor that supports form creation. Enter Form Editing mode and right-click on your Checkbox field to open its **Properties**.
In the Properties dialog, go to the **Actions** tab. Set the 'Select Trigger' dropdown to **Mouse Up**.
Set the 'Select Action' dropdown to **Run a JavaScript** and click the **Add** button to open the JavaScript Editor.
Enter the following code: `if (event.target.value == "Yes") { var f = this.getField("amount_1"); f.readonly = false; f.display = display.visible; f.value = "default amount"; } else { var f = this.getField("amount_1"); f.readonly = true; f.display = display.hidden; f.value = ""; }`
Click **OK** to close the JavaScript Editor, then click **Close** on the Properties dialog. Exit form editing mode to test clicking the checkbox.
Easily Edit and Fill Interactive PDF Forms
WPS Office provides robust PDF tools to create, view, fill, and manage interactive PDF forms seamlessly. It's a comprehensive, lightweight solution for handling complex PDF tasks and daily document management.
- 1. Open WPS Office: Launch WPS Office and navigate to the **PDF** tab from the home screen.
- 2. Import your PDF form: Click **Open** to select and load your interactive PDF document into the workspace.
- 3. Interact with fields: Use the built-in form viewer to click checkboxes, fill in dynamically appearing text fields, and verify form logic.
- 4. Save and export: Click **Menu** > **Save As** to save your completed form data, or export it to share with others.
Frequently Asked Questions
Why isn't my hidden PDF text field showing up when I click the checkbox?
This usually happens if the JavaScript references the wrong field name or uses an incorrect export value for the checkbox (e.g., your script checks for 'Yes' but the checkbox export value is set to 'On'). Double-check your exact field names and export values in the form properties.
What are the correct display constants for PDF JavaScript?
In PDF JavaScript, use `display.visible` to show a field, `display.hidden` to hide it, `display.noPrint` to show it on screen but hide it when printing, and `display.hiddenNoPrint` to hide it entirely. Using `0` or `1` can cause unexpected behavior in some viewers.
Can I toggle multiple text fields with one checkbox?
Yes. You can define multiple variables in your JavaScript `if` statement using `this.getField("field_name")` for each respective text field, and apply the `display.visible` or `display.hidden` properties to all of them within the same condition block.
How do I clear the text field value when hiding it?
Inside the `else` block of your JavaScript (which runs when the checkbox is unchecked), assign an empty string to the field's value property using `f.value = "";` just before setting its display property to hidden.
