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

Question

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 = "";
    });
}

Does this answer your question? [How to print a number with commas as thousands separators in JavaScript](https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript) — icecub, May 28 '21 at 14:08
Thanks to @icecub suggestion now the final result of the calculation is as I would like. In my case I have replaced the language from en-US in it-IT since in Italy we use the dot to separate the thousands. I have applied the suggestion as follows `bmruomo.toLocaleString ('it-IT');` — Snake, May 28 '21 at 15:08
@icecub With your proposed code, if I try to do an addition, the result is as follows: 10 + 1 = 101 instead of 11. Is there a way to eliminate this problem while keeping the formatting of the numbers? — Snake, May 29 '21 at 16:26
That's because it makes the number a string. I mean, machines don't use a comma as a separator in numbers. They only use a dot for floating point numbers. When using calculations, you need to use the original variable. Only use `toLocaleString` for showing the final result. Don't depend on it for more calculations. So instead of using it on the variable, just do `document.getElementById('bmruomo').value = bmruomo.toLocaleString('it-IT');`, keeping the original `bmruomo` intact as a number. — icecub, May 30 '21 at 22:08

Mister Jojo · Accepted Answer · 2021-05-28T15:29:04.053

0

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>

edited May 28 '21 at 15:29

answered May 28 '21 at 15:21

Mister Jojo

20,093
6
21
40

Thanks for the reply. It solves my problem, however, in my case I am working outside a form tag. I need to put the inputs in different sections of the page, I believe I can't do it inside a form as all the input fields are bound to the form itself. Anyway, adding bmruomo.toLocaleString ('it-IT'); I easily solved the problem while maintaining the structure of the code as asked in the question. – Snake May 28 '21 at 23:18
@EmanueleDaniele you can use my function `num2strEUR(n)` anywhere you want, with or without a form – Mister Jojo May 28 '21 at 23:24
Ok, I think I need to use the function you proposed because with toLocateString, when I do a calculation like 10 + 1 the result is 101 instead of 11. I try and update the comment on the situation. – Snake May 29 '21 at 16:23

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

1 Answers1