How To Set Number Format Using Jquery

In this article, We will learn about how to set number format using jQuery.

Here is a step:

1. Create one HTML form or You can use your own form

   <form class="form-wrap" action-xhr="#" method="post">
     <input type="number" class="number-formate-input">
     <input type="button" value="Convert" class="number-formate-btn">
     <p class="number-formate-output"></p>
   </form>

2. Add this Jquery in your child theme’s custom js file.

   jQuery( document ).ready( function( $ ) {
     $( '.number-formate-btn' ).on( 'click', function(){
       var number_val = $( '.number-formate-input' ).val();
       var custom_number_format_op = custom_number_format( number_val, '2', );
       $( '.number-formate-output' ).text( 'Output: ' + custom_number_format_op );
       $( '.number-formate-input' ).val( '' );
     } );
   });
   
   function custom_number_format( number_input, decimals, dec_point, thousands_sep ) {
     var number    = ( number_input + '' ).replace( /[^0-9+\-Ee.]/g, '' );
     var finite_number  = !isFinite( +number ) ? 0 : +number;
     var finite_decimals = !isFinite( +decimals ) ? 0 : Math.abs( decimals );
     var seperater   = ( typeof thousands_sep === 'undefined' ) ? ',' : thousands_sep;
     var decimal_pont  = ( typeof dec_point === 'undefined' ) ? '.' : dec_point;
     var number_output  = '';
     var toFixedFix = function ( n, prec ) {
       if( ( '' + n ).indexOf( 'e' ) === -1 ) {
         return +( Math.round( n + 'e+' + prec ) + 'e-' + prec );
        } else {
         var arr = ( '' + n ).split( 'e' );
         let sig = '';
         if ( +arr[1] + prec > 0 ) {
           sig = '+';
         }
         return ( +(Math.round( +arr[0] + 'e' + sig + ( +arr[1] + prec ) ) + 'e-' + prec ) ).toFixed( prec );
       }
     }
     number_output = ( finite_decimals ? toFixedFix( finite_number, finite_decimals ).toString() : '' + Math.round( finite_number ) ).split( '.' );
     if( number_output[0].length > 3 ) {
       number_output[0] = number_output[0].replace( /\B(?=(?:\d{3})+(?!\d))/g, seperater );
     }
     if( ( number_output[1] || '' ).length < finite_decimals ) {
       number_output[1] = number_output[1] || '';
       number_output[1] += new Array( finite_decimals - number_output[1].length + 1 ).join( '0' );
     }
     return number_output.join( decimal_pont );
   }

3. Here is an Output