How to Use Radio Buttons to Prefill PDF Text Fields with JavaScript
Question details
The user needs to auto-populate multiple text boxes in a PDF form with specific values depending on which radio button option is selected.
- Product
- PDF Editors (Acrobat / WPS PDF)
- Device & OS
- not provided
- Scenario
- Creating an interactive PDF form where selecting a specific radio button updates several dependent text fields simultaneously using a single script.
- Observed behavior
- A custom JavaScript logic needs to be applied to a calculation event to test the radio button's value and output the corresponding strings into designated text fields.
Ensure you are using a PDF editor that supports form field creation and custom JavaScript calculations. Take note of the exact field names for your radio button group and the target text boxes, as field names are case-sensitive.
Use a Custom Calculation Script in the Text Field
Apply a custom JavaScript snippet to the calculation event of your primary text field. The script will check the selected value of the radio button group and update the required text fields accordingly.
Instead of adding actions to the radio buttons themselves, the most reliable method is to place the script in the custom calculation event of a target text field. This ensures that the fields update dynamically whenever the form's state changes.
Open your PDF form in your PDF editor (e.g., Adobe Acrobat) and enter 'Prepare Form' or 'Form Editing' mode to reveal all field names.
Right-click the primary text field where you want the first calculation to appear, and select 'Properties' from the context menu.
Navigate to the 'Calculate' tab in the Properties window. Select the option 'Custom calculation script' and click the 'Edit' button.
Enter the following script, adjusting the field names ('Group1', 'Text10', 'Text11') and the output values ('100', '200') to match your specific form elements: if (this.getField('Group1').valueAsString == 'Protect') { event.value = '100'; this.getField('Text10').value = '200'; this.getField('Text11').value = '300'; } else if (this.getField('Group1').valueAsString == 'Protect Plus') { event.value = '150'; this.getField('Text10').value = '250'; this.getField('Text11').value = '350'; } else { event.value = ''; this.getField('Text10').value = ''; this.getField('Text11').value = ''; } Click 'OK' to save the script.
To ensure the text fields update the moment a user clicks the radio button, right-click your radio button group, go to Properties > Options, and check the box for 'Commit selected value immediately'.
View and Fill Interactive PDF Forms with WPS PDF
If you are looking for a fast, reliable, and highly compatible tool to view, edit, and fill interactive PDF forms, WPS Office provides an excellent built-in PDF editor. It smoothly handles complex interactive documents including form fields and buttons.
- 1. Download and Install WPS Office: Visit the official WPS Office website to download the free suite and install it on your device.
- 2. Open Your PDF Form: Launch WPS Office, click on 'Open', and select your interactive PDF form file.
- 3. Fill the Interactive Fields: Click on the highlighted form fields or radio buttons to easily input data and test dynamic form functions.
- 4. Save and Export: Once completed, go to Menu > Save As to save your filled form with all data perfectly preserved.
Frequently Asked Questions
Why is my text field not updating when I click the radio button?
This usually happens if the radio button does not commit its value immediately. In your form editor, go to the Radio Button Properties under the 'Options' tab, and check 'Commit selected value immediately'. Also, double-check that your JavaScript field names exactly match the form's field names, as they are case-sensitive.
Can I use this same JavaScript method for a dropdown menu instead of radio buttons?
Yes. The logic remains exactly the same. You just need to reference the field name of your dropdown menu in the script (e.g., this.getField('Dropdown1').valueAsString) and check against the dropdown's export values.
How do I find the exact field names in my PDF form?
You can view all exact field names by entering Form Editing or Prepare Form mode in your PDF editor. The names will typically appear overlaid on the form fields or listed in a side panel.
What is 'event.value' in the JavaScript calculation?
'event.value' refers to the value of the specific field where the calculation script is currently placed. Setting 'event.value = 100' directly populates that primary field, while using 'this.getField()' targets other separate fields in the document.
