How to Show a Custom Text Field from a PDF Drop-Down Selection
Question details
The user wants to display a custom text input field when the 'Other' option is selected in a dynamic drop-down menu and then automatically move the cursor focus to another field.
- Product
- Adobe Acrobat
- Device & OS
- not provided
- Scenario
- Developing and customizing dynamic PDF forms using JavaScript to improve data entry workflows.
- Observed behavior
- The user is attempting to dynamically convert a drop-down field into a text field or is using an empty array like setItems([]), which causes errors or fails to function as intended.
Ensure you have access to the form editing mode and JavaScript console in your PDF editor to apply and test custom form scripts.
Use a Separate Text Field with a JavaScript Visibility Toggle
Since drop-down fields cannot be dynamically converted into text fields, the best approach is to create a separate text field and control its visibility using a selection script.
PDF form fields have fixed types that cannot be changed via script after creation. To achieve the effect of entering a custom value when 'Other' is selected, you must overlay or position a dedicated text field and script the drop-down to hide or show it.
In your PDF form editor, create the main drop-down field (e.g., 'PRODUCT 1') and ensure one of the list items is 'OTHER'. Then, create a separate text field (e.g., 'OtherDetails') where users will type their custom entry.
Open the properties of the drop-down field, navigate to the validation or selection change script section, and add the following code: this.getField("OtherDetails").display = event.value == "OTHER" ? display.visible : display.hidden;
To streamline user entry, you can automatically move the cursor to the next field (e.g., 'SPECS 1') once they finish typing. Add a blur or keystroke script to the 'OtherDetails' text field using the setFocus method, like: this.getField("SPECS 1").setFocus();
If you are using the setItems method to populate drop-downs elsewhere in your document, ensure you pass a valid array containing items. Using an empty array, such as this.getField("SPECS 1").setItems([]), is invalid and will not be supported.
Build Dynamic PDF Forms Easily with WPS Office
WPS Office provides comprehensive PDF editing tools, allowing you to create, edit, and fill interactive PDF forms seamlessly. You can manage drop-downs, text fields, and form properties efficiently.
- 1. Open your PDF: Launch WPS Office and open your PDF document.
- 2. Access Form Tools: Navigate to the 'Form' tab on the top ribbon to access all interactive form controls.
- 3. Insert Fields: Click on 'Combo Box' for drop-downs or 'Text Field' to insert interactive elements into your page.
- 4. Adjust Properties: Double-click the inserted field to modify its name, appearance, visibility, and options list.
Frequently Asked Questions
Can I dynamically convert a PDF drop-down field into a text field?
No, PDF form fields cannot change their type dynamically. You must create a separate text field and use JavaScript to show or hide it based on the drop-down selection.
Why is my setItems([]) JavaScript code throwing an error?
The setItems method in PDF JavaScript requires a valid array containing at least one item. Passing an empty array is not supported and will result in a script execution error.
How do I automatically move the cursor to another field after a user finishes typing?
You can use the setFocus() method in your JavaScript code, triggered by an on-blur event, to move the cursor to a specific field. For example: this.getField("NextField").setFocus();.
