Develop Reference

Decimal / Thousand separator (dot and comma) in the calculation results Js and Input field

I'm trying to get separators for thousands, hundreds and decimals in the input field. For example: if I calculate 50 * 50 the result is 2500 while I would like to get 2.500,00
Otherwise: if I calculate 52,5 * 52,5 the result is 2756.25, while I would like to get 2.756,25
Below is the code I worked out helping me with stackoverflow posts https://jsfiddle.net/snake93/dyepq135/10/
I'm a fan and don't even know the basics of coding, so I was just trying to figure out how to implement the separators (dot and comma).
<label class="mts-label">Peso</label>
<input type="number" step="any" class="mts-field" maxlength="4" id="peso" name"peso1" placeholder="es: 70Kg"/>
<label class="mts-label">Altezza</label>
<input type="number" class="mts-field" maxlength="4" id="altezza" name"altezza1" placeholder="es: 170cm"/>
<label class="mts-label">BMR</label>
<input type="text" class="mts-field" id="bmruomo" name="bmruomo"
placeholder="0.000,0 Kcal" min="1" readonly/>
<button onclick="calculate()">Calcola</button>
<button id="reset" onclick="resetFields()">Reset</button>
calculate = function() {
var peso = document.getElementById('peso').value;
var altezza = document.getElementById('altezza').value;
var bmruomo = parseFloat(peso * altezza);
document.getElementById('bmruomo').value = bmruomo;
}
function resetFields(){
var inputArray = document.querySelectorAll('input');
inputArray.forEach(function (input){
input.value = "";
});
}

You can do that...
const
f_BMR = document.forms['f-BMR']
, num2strEUR = n =>
{
let str = n.toFixed(2).replace('.',',')
return [...str].reduce((r,c,i,a)=>
{
r += c
let p = (a.length - i)
if ((p%3)===1 && p>4) r += '.'
return r
},'')
}
f_BMR.onsubmit = e =>
{
e.preventDefault()
let bmr_val = (f_BMR.peso1.valueAsNumber * f_BMR.altezza1.valueAsNumber)
f_BMR.bmruomo.value = num2strEUR(bmr_val )
}
label,input, div {
display : block;
float : left;
clear : both;
}
label, div{
font-size : .7em;
font-weight : bold;
margin-top : .8em;
}
label:after {
content : ' :'
}
<form name="f-BMR">
<label>Peso</label>
<input name="peso1" type="number" step="any" placeholder="es: 70Kg" value="" required>
<label>Altezza</label>
<input name="altezza1" type="number" step="any" placeholder="es: 170cm"/ value="" required>
<label>BMR</label>
<input name="bmruomo" type="text" class="mts-field" placeholder="0.000,0 Kcal" value="" readonly>
<div>
<button type="submit">Calcola</button>
<button type="reset">Reset</button>
</div>
</form>

Adding digits entered in input boxes with keyup event in angular js

I am looking to display the addition of four values entered in the input boxes
<td><input type="text" value="22" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="one"></td>
<td><input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="two"></td>
<td><input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="three"></td>
<td><input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="four"></td>
And this is my js
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.getkeys = function (event) {
if($scope.one==='' || $scope.two==='' || $scope.three==='' || $scope.four==="" )
{
$scope.one=parseInt("0");
$scope.two=parseInt("0");
$scope.three=parseInt("0")
$scope.four=parseInt("0")
}
$scope.keyval = parseInt($scope.one)+parseInt($scope.two)+parseInt($scope.three)+parseInt($scope.four);
console.log($scope.keyval);
}
});
what i want is as soon as someone enters the value in the input boxes ,sum of all the four gets displayed ,the problem is if firstly user enters value in any box it display NaN ,until all the four values are entered any idea how to achieve it?
And how to know which ng-model value has been entered ,just like this.value in js

This is because the other fields are empty & trying to parseInt & add an empty field value will result in NaN.Alternatively you can pass 0 if field is empty
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.getkeys = function(event) {
if ($scope.one === '' || $scope.two === '' || $scope.three === '' || $scope.four === "") {
$scope.one = parseInt("0");
$scope.two = parseInt("0");
$scope.three = parseInt("0")
$scope.four = parseInt("0")
}
$scope.keyval = parseInt(($scope.one) || 0, 10) + parseInt($scope.two || 0, 10) + parseInt($scope.three || 0, 10) + parseInt($scope.four || 0, 10);
console.log($scope.keyval);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" value="22" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="one">
<input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="two">
<input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="three">
<input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="four"></div>
</div>

You don't need to bind a keyUp event, angularjs does that work for us.
Initialize the model one within the controller.
Create a function, i.e getTotal()
Use the object Number to convert the entered values to numbers.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.getTotal = function() {
return Number($scope.one) +
Number($scope.two) +
Number($scope.three) +
Number($scope.four)
};
$scope.one = 22;
$scope.two = 0;
$scope.three = 0;
$scope.four = 0;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" style="width:60px;margin:6px;" ng-model="one">
<input type="text" style="width:60px;margin:6px;" ng-model="two">
<input type="text" style="width:60px;margin:6px;" ng-model="three">
<input type="text" style="width:60px;margin:6px;" ng-model="four">
<p>Total</p>
<span>{{getTotal()}}</span>
</div>

Minior modification on #Ele code.
Change the input type from text to number to facilitate the key up event and disable characters to be entered
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.getTotal = function() {
return Number($scope.one) +
Number($scope.two) +
Number($scope.three) +
Number($scope.four)
};
$scope.one = 22;
$scope.two = 0;
$scope.three = 0;
$scope.four = 0;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="number" style="width:60px;margin:6px;" ng-model="one">
<input type="number" style="width:60px;margin:6px;" ng-model="two">
<input type="number" style="width:60px;margin:6px;" ng-model="three">
<input type="number" style="width:60px;margin:6px;" ng-model="four">
<p>Total</p>
<span>{{getTotal()}}</span>
</div>

How to restrict displaying minus values in the text field

Fiddle.
I have a text field, I want to restrict showing negative values to this text field, if I got negative value then I dont want to display that value in the text box.But my ng-model should contain that negative value.
function LoginController($scope) {
$scope.number = -10;
$scope.number1 = -20;
$scope.number2 = -30;
}
<div ng-app ng-controller="LoginController">
<input ng-model="number"></input>
<input ng-model="number1"></input>
<input ng-model="number2"></input>
<input type="submit" ng-click="login()" value="Login"></input>
</div>

<html>
<body>
<input type="text" onkeypress="OnlyNumber(this);"></input>
</body>
<script>
function OnlyNumber(i)
{
if(i.value.length>0)
{
i.value = i.value.replace(/[^\d]+/g, '');
}
}
</script>
</html>
Use this javascript code.
I have used onkeypress javascript attribute
You can use ng-keyup angularjs directive
check here

function cleanInput(selector){
var elements = document.querySelectorAll(selector);
for(element in elements){
if(parseInt(element.value) < 0 ) {element.value = '';}
}
}
Provided that this is your HTML:
<div id="clean-div" ng-app ng-controller="LoginController">
<input ng-model="number"></input>
<input ng-model="number1"></input>
<input ng-model="number2"></input>
<input type="submit" ng-click="login()" value="Login"></input>
Then,
cleanInput('#clean-div input');
EDIT: Solution by using HTML, is only valid for newer browsers. If you don't care, go ahead with input type=number solution. Else JavaScript is needed.

//try using conditional expression like this.
function LoginController($scope) {
let num=-10
$scope.number = num<0?'':num;
}

No need to use javascript at all.
Convert
<input ng-model="number"></input>
to
<input type="number" min="0" ng-model="number"></input>
for every input tag you need.
P.S: This will not perform not-showing when onLoad and copy/paste is the action but issue a warning that the value is not eligible for the input.

<form action="" method="post">
<input type="number" id="numval" min="0" />
</form>
// Select your input element.
var number = document.getElementById('numval');
// Listener for input element.
number.onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8)) {
return false;
}
}
95, < 106 corresponds to Numpad 0 through 9;
47, < 58 corresponds to 0 through 9 on the Number Row; and 8 is Backspace.

HTML :
<div ng-app ng-controller="LoginController">
<input ng-model="number" ng-change="onNumberChange('number')">
</input>
<input ng-model="number1" ng-change="onNumberChange('number1')">
</input>
<input ng-model="number2" ng-change="onNumberChange('number2')">
</input>
<input type="submit" ng-click="login()" value="Login"></input>
</div>
Controller :
function LoginController($scope) {
$scope.number = -10;
$scope.number1 = -20;
$scope.number2 = -30;
$scope.onNumberChange = function(valueName){
var number = parseInt($scope[valueName]);
if(number < 0){
$scope[valueName] = 0
}
}
}

Getting NaN as a result from Javascript

JS code
'use strict';
$(document).ready(function() {
});
function calculatePPI(inputWidth, inputHeight, inputDiagonal) {
document.getElementById("outputPPI").innerHTML=
((Math.sqrt(Math.pow('inputWidth', 2)) + (Math.pow('inputHeight', 2)))/'inputDiagonal');
}
HTML code
<body>
<h2>Length Converter</h2>
<p>The following program will convert your centimeters to inches.</p>
<p>
<label>Width (Pixels):</label>
<input id="inputWidth" type="number" placeholder="Width">
<p>
<label>Height (Pixels):</label>
<input id="inputHeight" type="number" placeholder="Height">
</p>
<p>
<label>Diagonal (Pixels):</label>
<input id="inputDiagonal" type="number" placeholder="Diagonal Length">
</p>
<button onclick="calculatePPI(document.getElementById('inputWidth', 'inputHeight', 'inputDiagonal').value)">Calculate</button>
</p>
<p>PPI: <span id="outputPPI"></span></p>
</body>
I'm getting NaN as a result whenever I try to calculate it.
Could anyone help me with this? I'm not sure where exactly the code is messing up, as I'm new to coding Javascript.

You can't use getElementById like that and in your function don't put a '' around your function variable.
Use like this:
'use strict';
$(document).ready(function() {
});
function calculatePPI(inputWidth, inputHeight, inputDiagonal) {
document.getElementById("outputPPI").innerHTML=
((Math.sqrt(Math.pow(inputWidth, 2)) + (Math.pow(inputHeight, 2)))/inputDiagonal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>Length Converter</h2>
<p>The following program will convert your centimeters to inches.</p>
<p>
<label>Width (Pixels):</label>
<input id="inputWidth" type="number" placeholder="Width">
<p><label>Height (Pixels):</label>
<input id="inputHeight" type="number" placeholder="Height"></p>
<p><label>Diagonal (Pixels):</label>
<input id="inputDiagonal" type="number" placeholder="Diagonal Length"></p>
<button onclick="calculatePPI(document.getElementById('inputWidth').value, document.getElementById('inputHeight').value, document.getElementById('inputDiagonal').value)">Calculate</button>
</p>
<p>PPI: <span id="outputPPI"></span></p>
</body>

In this line (Math.sqrt(Math.pow('inputWidth', 2)) + (Math.pow('inputHeight', 2)))/'inputDiagonal'); the result is NaN because your doing math with strings. Remove the ' (single quotes).
(Math.sqrt(Math.pow(inputWidth, 2)) + (Math.pow(inputHeight, 2)))/inputDiagonal);
This should work, because now your accessing the actual value of the variables inputWidth, inputHeight, etc. Before you were just creating strings.

HTML
<h2>Length Converter</h2>
<p>The following program will convert your centimeters to inches.</p>
<p>
<label>Width (Pixels):</label>
<input id="inputWidth" type="number" placeholder="Width">
<p><label>Height (Pixels):</label>
<input id="inputHeight" type="number" placeholder="Height"></p>
<p><label>Diagonal (Pixels):</label>
<input id="inputDiagonal" type="number" placeholder="Diagonal Length"></p>
<p>
<button onclick="calculatePPI();">Calculate</button>
</p>
<p>PPI: <span id="outputPPI"></span></p>
Javascript
'use strict';
$(document).ready(function() {
});
function calculatePPI() {
var inputWidth = document.getElementById('inputWidth').value;
var inputHeight = document.getElementById('inputHeight').value;
var inputDiagonal = document.getElementById('inputDiagonal').value;
var outputPPI = document.getElementById("outputPPI");
outputPPI.innerHTML= ((Math.sqrt(Math.pow(inputWidth, 2)) + (Math.pow(inputHeight, 2)))/inputDiagonal);
}
Note: there lots of syntax error in code like the assignment of value in the calculation of PPI and in function value for the parameters.You can try above code your calculation with native javascript and below one for JQuery.
function calculatePPI() {
var inputWidth = $('#inputWidth').val();
var inputHeight = $('#inputHeight').val();
var inputDiagonal = $('#inputDiagonal').vval();
var outputPPI = $("#outputPPI");
outputPPI.html(((Math.sqrt(Math.pow(inputWidth, 2)) + (Math.pow(inputHeight, 2)))/inputDiagonal));
}

JavaScript return NaN when you are not calculating with valid Numbers
NaN = Not A Number
Make sure your operands are valid number in your equation.
You can try like -
<button onclick="calculatePPI('inputWidth','inputHeight','inputDiagonal')">Calculate</button>
function calculatePPI(inputWidth, inputHeight, inputDiagonal) {
inputWidth = document.getElementById(inputWidth).value
inputHeight = document.getElementById(inputHeight).value
inputDiagonal = document.getElementById(inputDiagonal).value
inputWidth = inputWidth ? inputWidth : 0; /*Setting default value 0*/
inputHeight = inputHeight ? inputHeight : 0; /*Setting default value 0*/
inputDiagonal = inputDiagonal ? inputDiagonal : 0; /*Setting default value 0*/
document.getElementById("outputPPI").innerHTML = ((Math.sqrt(Math.pow(inputWidth, 2)) + (Math.pow(inputHeight, 2)))/inputDiagonal);
}

Can't get ng-model's value if the value is assigned from another ng-model

I have encountered a problem with the model values of angular. I have three scope variables bound to inputs via ng-model via an object called cfa: the first is amt_type, the second is amount and the third is comp in which the value for comp will depend on the first 2 values, the amt_type and amount. But the problem is when I tried to display cfa.comp, it doesn't get displayed, and can only be displayed when you typed into the input bound to the cfa.comp model. How can I get the value of the ng-model 'cfa.comp' or is there any angular method to fix my problem? Here is the code snippet. Thanks a lot for helping. :)
var app = angular.module('myApp', []);
app.controller('sampleCtrl', function($scope){
$scope.cfa = {};
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller = "sampleCtrl">
<select ng-model="cfa.amt_type">
<option value="D">Daily</option>
<option value="W">Weekly</option>
<option value="M">Monthly</option>
</select>
<input type="number" ng-model="cfa.amount" />
<input ng-if="cfa.amt_type == 'D'" type="number" ng-model="cfa.comp" value="{{cfa.amount * 7}}" />
<input ng-if="cfa.amt_type == 'W'" type="number" ng-model="cfa.comp" value="{{cfa.amount}}" />
<input ng-if="cfa.amt_type == 'M'" type="number" ng-model="cfa.comp" value="{{cfa.amount / 4}}" />
{{cfa.comp}}
</div>
</body>
</html>
Additional Info:
The codes above will be repeated several times with different model names and will be used to get the total. Say:
<input ng-if="cfa.amt_type == 'D'" type="number" ng-model="cfa.comp1" value="{{cfa.amount * 7}}" />
<input ng-if="cfa.amt_type == 'W'" type="number" ng-model="cfa.comp1" value="{{cfa.amount}}" />
<input ng-if="cfa.amt_type == 'M'" type="number" ng-model="cfa.comp1" value="{{cfa.amount / 4}}" />
<input ng-if="cfa.amt_type == 'D'" type="number" ng-model="cfa.comp2" value="{{cfa.amount * 7}}" />
<input ng-if="cfa.amt_type == 'W'" type="number" ng-model="cfa.comp2" value="{{cfa.amount}}" />
<input ng-if="cfa.amt_type == 'M'" type="number" ng-model="cfa.comp2" value="{{cfa.amount / 4}}" />
<input type="number" ng-model="cfa.total" value="{{cfa.comp1 + cfa.comp2}}" />
It is okay for me if I will put it in a div statement or any html tags, but how can I put the value in a variable or any way just to get the total? Thanks :)

You should make a function that gets called whenever the amt_type or amount changes, and remove the three inputs. See example below:
var app = angular.module('myApp', []);
app.controller('sampleCtrl', function($scope){
$scope.cfa = {};
//this function will be bound to the ng-change of the select list and input for amount
$scope.updateComp = function() {
if ($scope.cfa.amount) {
$scope.cfa.comp = $scope.cfa.amount;
if ($scope.cfa.amt_type == 'D') {
$scope.cfa.comp = $scope.cfa.amount * 7;
}
if ($scope.cfa.amt_type == 'M') {
$scope.cfa.comp = $scope.cfa.amount / 4;
}
}
};
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller = "sampleCtrl">
<select ng-model="cfa.amt_type" ng-change="updateComp()">
<option value="D">Daily</option>
<option value="W">Weekly</option>
<option value="M">Monthly</option>
</select>
<input type="number" ng-model="cfa.amount" ng-change="updateComp()" />
<div> Comp: {{cfa.comp}} </div>
</div>
</body>
</html>

Your ng-model and value attributes are conflicting for cfa-comp. I personally like the "controller as" and vm syntax, so I will offer that alternative. Also, the result field should be read-only.
var app = angular.module('myApp', []);
app.controller('sampleCtrl', function(){
vm = this;
vm.getComp = function() {
switch (vm.amt_type) {
case 'D':
return vm.amount * 7;
case 'W':
return vm.amount;
case 'M':
return vm.amount / 4;
default:
return undefined;
}
}
});
#comp {
margin-left: 5px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller = "sampleCtrl as ctrl">
<select ng-model="ctrl.amt_type">
<option value="D">Daily</option>
<option value="W">Weekly</option>
<option value="M">Monthly</option>
</select>
<input type="number" ng-model="ctrl.amount" />
<span id="comp">{{ctrl.getComp()}}</span
</div>
</body>
</html>