Oracle Apex: Format Number with Comma and Decimal Using JavaScript

In this Oracle Apex tutorial, you will learn how to format a number with comma and decimal using JavaScript. In Oracle Apex, for a text field or a number field, there is a property Format Mask, in which you can specify the number format with comma and decimal for the currency fields, but it shows after the page load and usually we require it to show when user moves to the next field by pressing the Tab key or using the mouse. To achieve this functionality in Oracle Apex, we can use the JavaScript method Number(value).toFixed() on the onfocusout or onblur event. Below are the examples:

Format Number with Comma and Decimal Using JavaScript Example

In the following example, we will use the JavaScript method Number(value).toFixed().replace() on focusout event to format the number into the currency format. Follow these steps:

Click on the Number Field in Oracle Apex page designer, for which you want to apply the format mask, then in the properties advance section paste the following JavaScript code in the Custom Attributes. Also, shown below in the image below:

onfocusout="this.value=Number(this.value).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')"

Oracle Apex - Convert number to currency format

Now when the user will press the Tab key or will use the mouse to navigate to the next field, this field value will be formatted with commas and 2 decimal places. If you want to change it to show 4 decimal places then use toFixed(4).

JavaScript to Format a Number with 2 Decimal Places in Oracle Apex

To format a number with 2 decimal places without the comma, use the following JavaScript code in the Customer Attributes section:

onfocusout="this.value=Number(this.value).toFixed(2)"

Here in both examples, I used the onfocusout JavaScript event, you can also use the onblur JavaScript event for the same code. Below is the example:

onblur="this.value=Number(this.value).toFixed(2)"

Related Tutorials:

Vinish Kapoor
Vinish Kapoor

Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

7 Comments

    • You can change item type to Text Field and set alignment to right, then the error will not occurred.

      Or in numeric type field try specifying the format mask as below:

      999G999G999G999G990D00

  1. How can I divide the values of a column (Ex. 00000048 / 10000) in same column? I’ve made it work in the SELECT statement, but when I try to save changes, the error message says that “Virtual Columns are not allowed”.

    • Click on the column you created, then in the Source section of property pallet make it as Query Only.

  2. Hi Vinish,
    I use Android device to add Decimal number in item. I use inputmethod=”decimal” to get numeric keyboard. My problem is that semicoln on keyboard is not working properly: comma is typed instead. Do you have other fix than simply replace comma after lose-focus on item?

  3. I tried but it did not work on my application. If I try the amount 18.211,32 or 18211,32 or 18,211.32 it returns an error. If only works if I try 18211.32, then it converts to 18,211.32.

    My field is a numeric one with the mask you recomended (999G999G999G999G990D00).
    The problem is on the onfocusout which is not “understanding” the comma if the user paste or type on the field.

    The correct is to replace comma for dot and the dot for comma. As I am in Brasil where the format is 0.000,00, the user, usually copy the amount from an document and paste directly to the form. But I have to convert do USD which use the forma 0,000.00.

    How can I do it? I already tried an SQL function replace but without sucess.

Comments are closed.