Append values before and after decimal point Javascript

Question

I have numeric fields on form were users can occasionally type a decimal value with decimal place but no values on one side. i.e the intended value to be entered can be 5 or 5.00 but occasionally a user can type .5 OR 5. so in this case if they have left out values before the decimal place, I would like to add/append the value with 0.5 or if they have left out the values after the decimal place I would like to add/append with 5.00

.5 => 0.5
5. => 5.00

Ideally the input value would then be updated onBlur or when user clicks/tabs away from that field or anywhere else on the page. My quick attempt at this is currently as follows (untested)

$('input').on('blur', function () {

  var currentValue = $(this).val();

  var splitNumber = currentValue.split('.');
  var beforeDecimal = splitNumber[0];
  var afterDecimal = splitNumber[1];

  if (beforeDecimal.length < 1)
  {
    //add one zero before decimal
  }

  if (afterDecimal.length < 1)
  {
    //add two zeros after decimal
  }

});

If you have a decimal point, you cannot split by comma.

Nikolaus
– Nikolaus

2018-08-14 22:10:48 +00:00
Commented Aug 14, 2018 at 22:10 — Nikolaus
– Nikolaus, Commented Aug 14, 2018 at 22:10
yes you are right, that was a typo on my end.

LavsTo
– LavsTo

2018-08-14 22:18:52 +00:00
Commented Aug 14, 2018 at 22:18 — LavsTo
– LavsTo, Commented Aug 14, 2018 at 22:18

Sushanth -- · Accepted Answer · 2018-08-14 22:16:24Z

2

Instead you can just use a combination of parseFloat and toFixed

parseFloat('.5') --> 0.5
parseFloat('5.') --> 5

$('input').on('blur', function() {
  let value = this.value;
  
  if(!isNaN(value)) {
     let parsedValue = parseFloat(value);
     
     $('.output').text(parsedValue.toFixed(2));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="text" />

<span>Output: </span>
<span class="output">
</span>

edited Aug 14, 2018 at 22:16

answered Aug 14, 2018 at 22:11

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mpen Over a year ago

Although you do risk introducing floating point rounding errors if there are a lot of decimal places.

Sushanth -- Over a year ago

@mpen That is always the case. It depends on the number of decimals OP wants it to round to

mpen Over a year ago

Not always. Input was a string. If you keep it as a string there's no need to introduce rounding error. But yes, this is an easy solution.

ferhado · Accepted Answer · 2018-08-14 22:32:04Z

1

Here is an example may help you:

  var myNum1 = .5;
  var myNum2 = 5.;

  function pad(num){
	return num.toFixed(2);
  }

  console.log(pad(myNum1));
  console.log(pad(myNum2));

edited Aug 14, 2018 at 22:32

answered Aug 14, 2018 at 22:18

ferhado

2,6042 gold badges17 silver badges38 bronze badges

Collectives™ on Stack Overflow

Append values before and after decimal point Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related