JS tips – How to round a number

While our powerful form builder offers the ability to make calculations with the Formula field, set a minimum/maximum value for a number or change the accepted data format, to round automatically a number you will need to add javascript to the form. Luckily you are just in the right place to learn how to do that!


Rounding a non-integer number

Let’s take the following script as an example:

function roundResult() {
var result1 = loader.engine.document.getElementById(111111111).getProperty('value.value'); 
var roundedValue1 = Math.round(result1 * 1) / 1;
loader.engine.document.getElementById(111111111).setValue(({"value": roundedValue1})); 
};

window.onclick = roundResult;

This script is used to change a fractional number (a number with decimals) into an integer (a whole number). For example, 3.123 becomes 3, while 3.789 becomes 4.

Change the numbers “111111111” with your own field’s ID (see how to find the field ID at pt. 2 here). Replace with the same field ID in both places, if you want the rounding to be in the same field. If you want to display the fractional number in a field and in another field display its rounded counterpart, then simply add the first field’s ID in place of the first 111111111 and the second field’s ID in the place of the second 111111111.

See how it works:


Rounding up and displaying only the first two decimals

Let’s say you need to display the prices on your form in a more currency friendly format. You want to avoid numbers such as these: 25.45678 and display this instead: $25.46.

First, make sure you add the currency symbol of your choice with our Prefix option (learn how here).

Second, you will need to use this script on your Formula or Number field:

function roundResult() {
var result1 = loader.engine.document.getElementById(111111111).getProperty('value.value'); 
var roundedValue1 = +((Math.round(result1 * 100)/100).toFixed(2));
loader.engine.document.getElementById(111111111).setValue(({"value": roundedValue1})); 
};

window.onclick = roundResult;

The same instructions apply as for the previous script.

See how it works:

In order to use these scripts on your own form, after you’ve added your own field IDs, paste the URL containing the script file into the Advanced -> Form ->  Add a JS script to your form. See our documentation on how to add JS to your form here.

Note: The script examples provided above trigger the action to round the number when a click is made on the form page. You can however change that. E.g: instead of “window.onclick” you can use “window.onchange” so that the script is triggered when an input is changed in your form.

Leave a Reply

Your email address will not be published. Required fields are marked *

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form for more information. in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?