How to Use JavaScript to Spawn a Template from a Selected Option in PDF
Question details
The user needs to spawn a specific page template (A, B, or C) in a PDF form using a button, dynamically based on which option is currently selected.
- Product
- PDF Editors
- Device & OS
- not provided
- Scenario
- Creating dynamic PDF forms where specific page templates are added based on the option a user selects.
- Observed behavior
- The user is currently using check boxes but needs a mutually exclusive selection method and the correct JavaScript workflow to successfully spawn the matching template.
Ensure you have access to a PDF editor with advanced form editing and JavaScript support. You will also need your target templates (A, B, and C) already created and set as hidden templates within your document.
Use Radio Buttons and JavaScript to Spawn Templates
Replace check boxes with mutually exclusive radio buttons and execute a custom JavaScript script via a push button to spawn the correct hidden template.
When forcing a user to select only one template option (A, B, or C), mutually exclusive radio buttons are the standard approach rather than checkboxes. By assigning a distinct export value to each radio button, your JavaScript can easily identify the user's choice and spawn the associated template page.
Create a radio button group in your form. Open the Properties menu for each radio button, navigate to the Options tab, and assign a unique export value (e.g., 'TemplateA', 'TemplateB') to each.
Open the Page Templates menu in your PDF editor. Create templates from the document pages you want to spawn, and ensure the 'Hidden' property is checked so they do not appear until triggered.
Insert a regular Push Button onto the form. Open its Properties, navigate to the Actions tab, choose 'Mouse Up' as the trigger, and set the action to 'Run a JavaScript'.
Enter a script that retrieves the export value of the radio button group. The script should first delete any previously spawned pages to prevent duplication, and then execute getTemplate('YourTemplateName').spawn() based on the currently selected radio button.
Create and Edit Interactive PDF Forms with WPS PDF
WPS Office includes a powerful PDF editor that allows you to easily insert, edit, and manage interactive form fields such as radio buttons, check boxes, and push buttons to build dynamic documents.
- 1. Open WPS PDF: Launch WPS Office and open your PDF document using the integrated PDF editor.
- 2. Access the Form tab: Navigate to the 'Form' tab on the top ribbon to view all available interactive form controls.
- 3. Insert Form Fields: Click on 'Radio Button' or 'Push Button' to draw them onto your document, then double-click the fields to configure their properties, export values, and actions.
Frequently Asked Questions
Why should I use radio buttons instead of check boxes for spawning a single template?
Radio buttons inherently enforce mutually exclusive selection, meaning only one option can be active at a time. If you use check boxes, a user could select multiple boxes simultaneously, which drastically complicates the JavaScript logic required to determine which single template to spawn.
How do I hide a page template before spawning it?
In your PDF editor's Page Templates manager, you can define an existing page as a template and toggle its visibility by checking the 'Hidden' option. This ensures the template itself isn't visible in the document flow until the JavaScript spawn() method is explicitly called.
How do I prevent duplicate pages when spawning templates multiple times?
In your JavaScript code, you must include logic to remove previously spawned template pages before triggering the new getTemplate().spawn() function. This usually involves tracking the assigned page number or naming convention of the spawned template and deleting it dynamically using the deletePages() method.
