JS tips – Additional formatting options for field inputs

Our form builder offers you the possibility to apply diverse formats and validation options to your fields. For example, the Phone field will automatically format the number you introduce and you can have quite a few variants too. Have a look over our comprehensive guide on how to choose from the large selection of field formats we offer.

Nothing quite suits what you need? Read on for more advanced options.

First, let’s make sure we have the basics covered. Read here how to add a script to your 123FormBuilder form. Now, we can move on to the part that is more fun.

Change text input to lowercase/uppercase

The script examples provided below will help you to automatically format your clients’ answers to be in all caps or all lowercase. After they are done writing in a field, the text will change accordingly.

Add this script to your form in order to change an input to all lowercase:

function changeTextFormat() {
var valueOne = loader.engine.document.getElementById(00000000).getProperty('value.value');
loader.engine.document.getElementById(00000000).setValue(({"value": valueOne.toLowerCase()})); 
}
window.onchange = changeTextFormat;

Add this script to your form in order to change an input to all uppercase:

function changeTextFormat() {
var valueTwo = loader.engine.document.getElementById(000000000).getProperty('value.value');
loader.engine.document.getElementById(000000000).setValue(({"value": valueTwo.toUpperCase()})); 
}
window.onchange = changeTextFormat;

In both cases, you just need to replace “00000000” with the field ID of your own Short answer/ Long answer/ Email field.

In order to find the ID of a field, right-click on the field and use the Inspect option of your browser.

The result:

Add digits grouping/ thousand separators

Do you calculate and/or collect data with very large numbers on your forms? It comes very handy to automatically format the numbers that your clients input on the form (or the results calculated by a Formula field) with thousands separators. This ensures easier readability.

To use this script you will need to make sure you have a Number field and/or a Formula field, where the number is inputted/calculated, as well as a Short answer field, where the new number’s format is displayed. To not overcrowd your form, you can choose to hide either the Number/Formula fields or the Short answer field (depending on whether you want the form participants to see the formatted number or not).

Here is the script:

function addSeparators() {
var number1 = loader.engine.document.getElementById(000000000).getProperty('value.value'); // - formula field or number field
loader.engine.document.getElementById(111111111).setValue(({"value": number1.toLocaleString('en-US')})); //- short text field
};
window.onclick = addSeparators;

Replace “00000000” with the field ID of your Number or Formula field and then replace “111111111” with the field ID of your Short answer field. Remember, the Short answer field is the only field where the number is formatted.

See the result:

In the script above we used the ‘en-US’ locale, which formats a number like 123123123.45 into 123,123,123.45. However, if you need to use the 123.123.123,45 formatting method, replace ‘en-US’ with ‘de-DE’.

If you have more fields with numbers that need formatting, create for each field an associated Short answer field. Repeat the lines of code between the curly brackets {} for each pair of Number/Formula field – Short answer field. Make sure to change the name of the variable for each repetition (ex: var number2, var number3, etc.) and change it accordingly after setValue(({“value”: as well.

Related articles:

• JS Tips – How to round a number