Cara menggunakan number format javascript input

I would like to add a thousands separator to a numeric field as people type in an answer.

Table of Contents Show

Explanation of code
Description:
How to use it:
How do you add commas as thousands separator for numbers in JavaScript?
How do you add a thousands separator in numbers?
How do you format a thousands separator?
How do you format numbers in JavaScript?

Table of Contents

Explanation of code
Description:
How to use it:
How do you add commas as thousands separator for numbers in JavaScript?
How do you add a thousands separator in numbers?
How do you format a thousands separator?
How do you format numbers in JavaScript?

In SSI Web this can be done with some custom JavaScript, but there are couple of tricky aspects to implementing it. The first is that numeric questions cannot save a number containing commas—only numbers are allowed. So the question will need to be a text question. Another thing to consider is that inserted commas will get saved to the database, which may make data processing/analysis trickier if a number is needed or expected.

To be safe, this example uses a free format question that adds commas to input and saves two answers: one with commas and one without commas.

To begin, create a free format question and add two variables: a text variable and a numeric hidden variable. (Note: Numeric fields are limited to 999999999 (nine nines), so if more digits are need then make the hidden variable text instead of numeric) Place the required HTML on the page for the variables to display and save correctly. An easy way to make sure the HTML is correct is to make SSI Web to it. Click the pencil icon next to the HTML box on the Variables/Question HTML tab of the free format question to bring up the text editor. Click the hammer and wrench icon at the top of the page and select the variable you want to insert.

Now the JavaScript. Click the Advanced button from the free format question and place the following JavaScript in the HTML <head> tab.

<script type="text/javascript"> $(document).ready(function() { var textbox = '#ThousandSeperator_commas'; var hidden = '#ThousandSeperator_num'; $(textbox).keyup(function () { var num = $(textbox).val(); var comma = /,/g; num = num.replace(comma,''); $(hidden).val(num); var numCommas = addCommas(num); $(textbox).val(numCommas); }); });

function addCommas(nStr) { nStr += ''; var comma = /,/g; nStr = nStr.replace(comma,''); x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } </script>

Explanation of code

Tells the browser to interpret everything that follows this line as JavaScript code.
Contains a jQuery anonymous function that run the code once all of the content on the page has been loaded and the document is ready for further interaction.
Saves the name of the text free format variable to a JavaScript variable called textbox. jQuery will use this to manipulate the text typed into the input box. In the above example the name of the free format question is ThousandSeparator and the name of the text free format variable is ThousandSeperator_commas. This name will need to change to whatever free format variable name the current study is using.
Does the same thing as Line 3, but for the free format hidden variable. #ThousandSeperator_num will also need to change to match whatever is in the current study (the format is: #QuestionName_VariableName).
Will make sure that lines 6 through 11 are run every time a number is typed into the text input field.
Grabs the current value of the text input box and saves it to a variable called num.
Sets up a regular expression that will find commas in the number pulled from the text input box.
Removes any commas currently in the number. Without doing this 1,000 becomes 1,0,000 instead of 10,000 when a fourth zero is entered.
Saves the number to the hidden variable.
Adds commas back in to the number.
Puts the number, containing thousands separators in the correct places, back in the text input box.
Ends the function started in line 5.
Ends the function started in line 2.
Blank line for readability.
This is the function that inserts commas into a number.

Note: If only a number with commas needs to be stored in respondent data than this can be done with just a text question instead of a free format question. If that is the case then textbox will be equal to the name of the question, and lines 4, 7, 8, and 9 (dealing with the hidden free format variable) can be deleted.

Author:	amiryxe
Views Total:	997 views
Official Page:	Go to website
Last Update:	June 22, 2022
License:	MIT

Preview:

Description:

A really simple JavaScript plugin that lets you format a number with a custom character (default: comma) as a thousands separator.

How to use it:

1. Import the easy-number-separator.js JavaScript library.

<script src="easy-number-separator.js"></script>

2. Attach the easyNumberSeparator to the input field you specify and done.

<input type="text" class="number-separator" placeholder="Enter Your Number..." />

easyNumberSeparator({
  selector: '.number-separator',
})

3. Customize the thousands separator. Default: comma(,).

easyNumberSeparator({
  selector: '.number-separator',
  separator: '.'
})

4. If you want to send data to the server, you can set a result input by resultInput property and hold the original value.

 <input type="text" id="result_input" name="">

easyNumberSeparator({
  selector: '.number-separator',
  separator: ',',
  resultInput: '#result_input',
})

Changelog:

06/22/2022

fix bug in default configs and decimal separator

11/21/2021

fix: run separator on phone keyboards

10/19/2021

create result input to hold original value

10/08/2021

JS Update

How do you add commas as thousands separator for numbers in JavaScript?

To comma-separate thousands in a big number in JavaScript, use the built-in toLocaleString() method. It localizes the number to follow a country-specific number formatting. To separate thousands with commas, localize the number to the USA.

How do you add a thousands separator in numbers?

Show or hide the thousands separator.

Select the cells that you want to format..

On the Home tab, click the Dialog Box Launcher next to Number..

On the Number tab, in the Category list, click Number..

To display or hide the thousands separator, select or clear the Use 1000 Separator (,) check box..

How do you format a thousands separator?

The character used as the thousands separator In the United States, this character is a comma (,). In Germany, it is a period (.). Thus one thousand and twenty-five is displayed as 1,025 in the United States and 1.025 in Germany. In Sweden, the thousands separator is a space.

How do you format numbers in JavaScript?

JavaScript numbers can be formatted in different ways like commas, currency, etc. You can use the toFixed() method to format the number with decimal points, and the toLocaleString() method to format the number with commas and Intl. NumberFormat() method to format the number with currency.