In jQuery what s the best way of formatting a number to 2 decimal places

Question

This is what I have right now        number   val parseFloat     number   val    toFixed 2      It looks messy to me   I don t think I m chaining the functions correctly   Do I have to call it for each textbox  or can I create a separate function

User · Answer

We modify a Meouw function to be used with keyup, because when you are using an input it can be more helpful.

Check this:

Hey there!, @heridev and I created a small function in jQuery.

You can try next:

HTML

<input type="text" name="one" class="two-digits"><br>
<input type="text" name="two" class="two-digits">?

jQuery

// apply the two-digits behaviour to elements with 'two-digits' as their class
$( function() {
    $('.two-digits').keyup(function(){
        if($(this).val().indexOf('.')!=-1){         
            if($(this).val().split(".")[1].length > 2){                
                if( isNaN( parseFloat( this.value ) ) ) return;
                this.value = parseFloat(this.value).toFixed(2);
            }  
         }            
         return this; //for chaining
    });
});

? DEMO ONLINE:

http://jsfiddle.net/c4Wqn/

(@heridev, @vicmaster)

User · Answer

Maybe something like this  where you could select more than one element if you d like       number   each function          this  val parseFloat   this  val    toFixed 2

User · Answer

Maybe something like this  where you could select more than one element if you d like       number   each function          this  val parseFloat   this  val    toFixed 2

User · Answer

Maybe something like this  where you could select more than one element if you d like       number   each function          this  val parseFloat   this  val    toFixed 2

User · Answer

Maybe something like this  where you could select more than one element if you d like       number   each function          this  val parseFloat   this  val    toFixed 2

User · Answer

If you re doing this to several fields  or doing it quite often  then perhaps a plugin is the answer  Here s the beginnings of a jQuery plugin that formats the value of a field to two decimal places  It is triggered by the onchange event of the field  You may want something different    lt script type  text javascript  gt          mini jQuery plugin that formats to two decimal places      function                fn currencyFormat   function                 this each  function  i                       this  change  function  e                        if  isNaN  parseFloat  this value       return                      this value   parseFloat this value  toFixed 2                                                   return this    for chaining                   jQuery            apply the currencyFormat behaviour to elements with  currency  as their class        function                 currency   currencyFormat              lt  script gt      lt input type  text  name  one  class  currency  gt  lt br gt   lt input type  text  name  two  class  currency  gt

User · Answer

If you re doing this to several fields  or doing it quite often  then perhaps a plugin is the answer  Here s the beginnings of a jQuery plugin that formats the value of a field to two decimal places  It is triggered by the onchange event of the field  You may want something different    lt script type  text javascript  gt          mini jQuery plugin that formats to two decimal places      function                fn currencyFormat   function                 this each  function  i                       this  change  function  e                        if  isNaN  parseFloat  this value       return                      this value   parseFloat this value  toFixed 2                                                   return this    for chaining                   jQuery            apply the currencyFormat behaviour to elements with  currency  as their class        function                 currency   currencyFormat              lt  script gt      lt input type  text  name  one  class  currency  gt  lt br gt   lt input type  text  name  two  class  currency  gt

User · Answer

We modify a Meouw function to be used with keyup, because when you are using an input it can be more helpful.

Check this:

Hey there!, @heridev and I created a small function in jQuery.

You can try next:

HTML

<input type="text" name="one" class="two-digits"><br>
<input type="text" name="two" class="two-digits">?

jQuery

// apply the two-digits behaviour to elements with 'two-digits' as their class
$( function() {
    $('.two-digits').keyup(function(){
        if($(this).val().indexOf('.')!=-1){         
            if($(this).val().split(".")[1].length > 2){                
                if( isNaN( parseFloat( this.value ) ) ) return;
                this.value = parseFloat(this.value).toFixed(2);
            }  
         }            
         return this; //for chaining
    });
});

? DEMO ONLINE:

http://jsfiddle.net/c4Wqn/

(@heridev, @vicmaster)

User · Answer

If you re doing this to several fields  or doing it quite often  then perhaps a plugin is the answer  Here s the beginnings of a jQuery plugin that formats the value of a field to two decimal places  It is triggered by the onchange event of the field  You may want something different    lt script type  text javascript  gt          mini jQuery plugin that formats to two decimal places      function                fn currencyFormat   function                 this each  function  i                       this  change  function  e                        if  isNaN  parseFloat  this value       return                      this value   parseFloat this value  toFixed 2                                                   return this    for chaining                   jQuery            apply the currencyFormat behaviour to elements with  currency  as their class        function                 currency   currencyFormat              lt  script gt      lt input type  text  name  one  class  currency  gt  lt br gt   lt input type  text  name  two  class  currency  gt

User · Answer

If you re doing this to several fields  or doing it quite often  then perhaps a plugin is the answer  Here s the beginnings of a jQuery plugin that formats the value of a field to two decimal places  It is triggered by the onchange event of the field  You may want something different    lt script type  text javascript  gt          mini jQuery plugin that formats to two decimal places      function                fn currencyFormat   function                 this each  function  i                       this  change  function  e                        if  isNaN  parseFloat  this value       return                      this value   parseFloat this value  toFixed 2                                                   return this    for chaining                   jQuery            apply the currencyFormat behaviour to elements with  currency  as their class        function                 currency   currencyFormat              lt  script gt      lt input type  text  name  one  class  currency  gt  lt br gt   lt input type  text  name  two  class  currency  gt

[javascript] In jQuery, what's the best way of formatting a number to 2 decimal places?

Examples related to javascript

Examples related to jquery

Examples related to rounding

Examples related to decimal-point

Examples related to number-formatting