How to Populate a PDF Dropdown with Export Values Using JavaScript
Question details
The user needs to configure a PDF dropdown list with both display labels and underlying export values using a JavaScript action triggered by a form button.
- Product
- PDF Editor
- Device & OS
- not provided
- Scenario
- Creating an interactive PDF form where clicking a button dynamically populates a specific dropdown field with a predefined list of options and their corresponding data export values.
- Observed behavior
- The goal is to successfully execute the setItems JavaScript method on a button's Mouse Up trigger so that the first array value serves as the display text and the second as the export value.
Ensure your PDF editing software has advanced form editing capabilities and supports JavaScript execution. Verify the exact field name of the dropdown you intend to populate, as JavaScript is case-sensitive.
Use the setItems Method in a Button Action
Attach a JavaScript snippet to a button's Mouse Up event to programmatically inject arrays of display labels and export values into a target dropdown field.
In PDF JavaScript, the setItems method is used to populate Combo Box (dropdown) or List Box fields. The method accepts an array of arrays, where each inner array represents an item. The first element of the inner array is the display label (what the user sees), and the second element is the export value (the data submitted or used in calculations).
Enter Form Editing mode in your PDF software. Create or locate your target Dropdown (Combo Box) field and note its exact name (e.g., 'TargetDropdown').
Insert a Button field onto your PDF page. Double-click the button to open the 'Button Properties' dialog box.
Navigate to the 'Actions' tab in the Properties window. Select 'Mouse Up' from the 'Select Trigger' dropdown menu.
From the 'Select Action' dropdown, choose 'Run a JavaScript', and then click the 'Add' button to open the JavaScript editor.
Type the script using this format: this.getField('TargetDropdown').setItems([['Display Item 1', 'Export1'], ['Display Item 2', 'Export2']]); Click OK to save, close the properties, and exit Form Editing mode to test the button.
Create and Manage Interactive PDF Forms with WPS Office
If you prefer building interactive forms without writing complex JavaScript, WPS Office PDF provides a highly intuitive visual form builder. You can easily insert dropdowns, assign export values, and design professional forms with just a few clicks.
- 1. Open your PDF: Launch WPS Office and open the PDF document you want to turn into an interactive form.
- 2. Access Form Tools: Navigate to the 'Form' tab in the top ribbon menu to access the suite of interactive form controls.
- 3. Insert a Combo Box: Click on 'Combo Box' (Dropdown) and click anywhere on the page to place the field.
- 4. Set Export Values Visually: Double-click the newly created dropdown to open its Properties. Under the 'Options' tab, type your 'Item' name and 'Export Value', then click 'Add' to populate the list instantly.
Frequently Asked Questions
What is the difference between a display label and an export value in a PDF dropdown?
The display label is the text visually shown to the user in the dropdown menu. The export value is the hidden data associated with that selection, which is used when the form data is submitted to a server or used in other JavaScript calculations.
Why isn't my JavaScript executing when I click the PDF button?
Your PDF viewer might have JavaScript disabled for security reasons. Go to your PDF reader's Preferences > JavaScript, and ensure 'Enable Acrobat JavaScript' is checked. Additionally, verify that the field name in your script exactly matches the target dropdown's name.
Can I populate a PDF dropdown dynamically based on another dropdown's selection?
Yes. You can attach a custom formatting or validation script to the first dropdown. When the user changes its value, the script can use the setItems method to instantly update the options available in the second dropdown.
