How to Increment and Decrement Ordinal Numbers in PDF Forms Using JavaScript
Question details
The user needs to create interactive buttons in a PDF form that increment or decrement a text field's numerical value while automatically applying the correct ordinal suffix (e.g., 1st, 2nd, 3rd, 4th).
- Product
- Device & OS
- not provided
- Scenario
- Developing interactive PDF forms with dynamic counter fields that respond to user clicks.
- Observed behavior
- The user wants a text field's value to change sequentially with ordinal indicators (from 1st to 2nd to 3rd) upon button clicks, but is encountering syntax and logic issues when reading and updating the field value.
Ensure you are using a PDF editor that supports document-level JavaScript and interactive form fields. Familiarity with basic JavaScript syntax and form field properties is highly recommended before writing the script.
Use Document-Level Scripts and Button Actions
Create a centralized JavaScript function to handle the math and suffix logic, then call these functions from your interactive buttons to update the field value dynamically.
Instead of writing the entire script directly into the button, it is best practice to place your calculation and formatting logic in a document-level script. This allows multiple buttons to call the same functions.
When reading the field, ensure you are accessing its value (using valueAsString) rather than the field object itself.
Add a text field to your PDF form and name it (e.g., 'OrdinalCounter'). Open its properties and set its default value to '1st'.
Navigate to your PDF editor's JavaScript console or Document Scripts section. Create a new document-level script to house your functions.
Create countUp() and countDown() functions. In these functions, use getField('OrdinalCounter').valueAsString to read the current value. Use string manipulation to strip the current suffix (st, nd, rd, th) and convert the remaining string into a numeric value, then add or subtract 1.
Write a formatting function to append the correct suffix to the new number. Check if the last two digits are 11, 12, or 13, as these always take 'th'. For other numbers, append 'st' if it ends in 1, 'nd' if 2, 'rd' if 3, and 'th' for all others.
Create 'Up' and 'Down' button fields. Right-click to access their Properties, navigate to the Actions tab, choose 'Mouse Up' as the trigger, and select 'Run a JavaScript' as the action. Enter countUp(); for the up button and countDown(); for the down button.
Edit and Manage Interactive PDF Forms with WPS Office
WPS PDF provides comprehensive tools to create, edit, and fill interactive PDF forms. Whether you need to insert text fields, checkboxes, or buttons, WPS Office makes it simple to manage your document workflows efficiently.
- 1. Open your PDF: Launch WPS Office, select the PDF module, and open your document.
- 2. Access form tools: Navigate to the 'Form' tab on the top ribbon to reveal the interactive form toolkit.
- 3. Add or modify fields: Use the available tools to insert text fields, push buttons, or modify existing form elements.
- 4. Configure properties: Double-click any form field to open its properties panel, where you can set default values and basic actions.
Frequently Asked Questions
Why is my JavaScript returning an object error instead of the text value?
This happens when you reference the field object itself rather than its contents. Make sure you use getField('FieldName').value or getField('FieldName').valueAsString to extract the actual text, rather than just getField('FieldName').
How do I mathematically check for 11th, 12th, and 13th in JavaScript?
You can use the modulo operator. First, find the remainder of the number divided by 100 (num % 100). If the result is 11, 12, or 13, append 'th'. If not, find the remainder of the number divided by 10 (num % 10) to determine if it should end in 'st', 'nd', 'rd', or 'th'.
Can I use the same ordinal script for multiple fields in one PDF?
Yes. Instead of hardcoding the field name into your document-level script, modify your countUp() and countDown() functions to accept a parameter (e.g., function countUp(fieldName)). Then, in each button's action, pass the target field's name as an argument like countUp('Counter1');.
