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="" 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

Submit a Comment

Your email address will not be published. Required fields are marked *

Footer Logo

Subscribe

Select Categories