How to add decimal number in amount field. ( 0.00 )

Question

I am working on an HTML input field where I need to allow the user to enter a numerical amount.

I need to show 0.00 by default, and when the user enters amount, e.g. 25, I need to send the value 25.00.

How can I achieve this?

Check out the `toFixed()` method on Number: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed — Daniel Bank, Nov 30 '16 at 06:09
Possible duplicate of [Formatting a number with exactly two decimals in JavaScript](http://stackoverflow.com/questions/1726630/formatting-a-number-with-exactly-two-decimals-in-javascript) — Anupam, Nov 30 '16 at 06:10
I removed angular js tag as there is no code referring to it. Please add the relevant code and then add angular js tag. Thanks. — Sid, Nov 30 '16 at 06:24

philantrovert · Answer 1 · 2016-11-30T06:23:48.507

3

$(".click").on('click', function() {
  var val = $(".decimalInput").val();
  var decVal = parseFloat(val).toFixed(2);
  $(".decimalInput").val(decVal)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input value=0.00 class='decimalInput'>
<button class='click'>
  Click!
</button>

edited Nov 30 '16 at 06:23

answered Nov 30 '16 at 06:16

philantrovert

9,904
3
37
61

it is taking multiple decimal i need to allow only one. – User123 Nov 30 '16 at 06:19
What do you mean by you need to allow only one? Only one input? – philantrovert Nov 30 '16 at 06:27

score 2 · Answer 2 · answered Nov 30 '16 at 06:12

2

Use Number.prototype.toFixed()

var x = 25
var twoDecPlaces = x.toFixed(2)
// returns "25.00"

answered Nov 30 '16 at 06:12

Mohayemin

3,841
4
25
54

score 1 · Answer 3 · answered Nov 30 '16 at 06:49

Here is a solution in more angular js way, restricting the user to enter only two decimals.

The user cannot enter more than two decimals. and also only one decimal point

// Code goes here

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.price = 0.00;
 $scope.onSubmit = function()
 {
   
  alert(parseFloat($scope.price).toFixed(2));
 }
});
app.directive("validateWith", [function(){
    return {
        restrict: "A",
        link: function($scope, $el, $attrs){
            var regexp = eval($attrs.validateWith);
            var origVal;
            // store the current value as it was before the change was made
            $el.on("keypress", function(e){
                origVal = $el.val();
            });

            // after the change is made, validate the new value
            // if invalid, just change it back to the original
            $el.on("input", function(e){
              console.log(regexp.test($el.val()))
                if(!regexp.test($el.val())){
                  e.preventDefault();
                  $el.val(origVal);
                }
                
            });
        }
    }
}]);

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
<div ng-app="myApp" ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
    <input type="number" ng-model="price" name="price_field" required validate-with="/^\d{1,5}(\.\d{1,2})?$/" step="0.01" value="0.00"/>
    <span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
    <input type="submit" value="submit"/>
</form>
</div>
  </body>

</html>

Please run this code snippet.

Here is a Working demo

How to add decimal number in amount field. ( 0.00 )

3 Answers3