Format number in input box

Ask the community
,
1

Hello, i have this page for mortgage calculator and i have this input box where users can input their house price, down payment, etc. And i wanted to make the input number dynamically formatted to 000.000.000. Here’s my code, I got it from a forum post but it doesn’t work. Any ideas how can i make it work? Thanks!

export function input1_keyPress(event) {
    $w("#input1").onKeyPress( (event) => {
        setTimeout(parseString, 10);
        })
 function parseString() {
     let value = $w("#input1").value;
     let stringDigits = value.replace(/[^0-9]/g,"");
     let finalString = stringDigits.replace(/...\B/g, "$&.");
     $w("#input1").value = finalString;
        }
}

$w.onReady(function () {
 
$w('#button6').onClick(function(){
  
    var harga_rumah = parseInt($w('#input1').value);
    var uang_muka = parseInt($w('#input2').value);
    var margin = parseFloat($w('#input4').value).toFixed(2);
    var tenor = parseInt($w('#dropdown4').value);
    var penghasilan  = parseInt($w('#input6').value);
    var cicilan_lain = parseInt($w('#input7').value);
    const LIMIT = 40;

    // error if...
    // uang_muka >= harga_rumah
    if (uang_muka >= harga_rumah)
    {
        $w('#text30').text = ('Uang Muka tidak boleh lebih dari Harga Rumah');
        exit();
   }

    // penghasilan >= harga rumah - uang_muka
    if (penghasilan >= harga_rumah)
    {
        $w('#text30').text = ('Penghasilan per bulan lebih dari Harga Rumah');
        exit();
    }

    var tot1 = harga_rumah - uang_muka;
    var bng  = margin / 1200;
    var bulan = tenor*12;
    var hitung1 = tot1*bng;
    var hitung2 = 1-(1/Math.pow((1+bng),bulan));
    var cicilan_per_bulan = hitung1/hitung2;
    
    var pinjaman = harga_rumah - uang_muka;
    var total_pinjaman = pinjaman + (margin / 100 * pinjaman * tenor);
    //var hitung_k1 = margin / 1200;
    var cicilan_bulanan = parseInt(total_pinjaman / tenor / 12);
    var persentase_cilan = parseFloat((cicilan_bulanan + cicilan_lain) / penghasilan * 100).toFixed(2);
$w('#text31').text = addCommas(harga_rumah);
    //$w('hasil_uang_muka').innerHTML = addCommas(uang_muka);
    //$w('hasil_margin').innerHTML = margin;
    //$w('.hasil_pinjaman')[0].innerHTML = $w('.hasil_pinjaman')[1].innerHTML = addCommas(pinjaman);
    //$w('.hasil_tenor')[0].innerHTML = $w('.hasil_tenor')[1].innerHTML = tenor;
    //$w('.hasil_pinjaman')[0].innerHTML =
    //$w('.hasil_pinjaman')[1].innerHTML = 
$w('#text42').text = addCommas(pinjaman);
    //$w('hasil_total_pinjaman').innerHTML =
    //$w('total_pinjaman').innerHTML = addCommas(total_pinjaman);
$w('#text43').text = addCommas(cicilan_per_bulan.toFixed(0));
var persentase_cicilan_fix = parseFloat((cicilan_per_bulan + cicilan_lain) / penghasilan * 100).toFixed(2);
//$if (persentase_cilan > LIMIT)
//$w('#text38').text = '<span style=color:red>' + persentase_cilan + '</span>';
//else

$w('#text38').text= persentase_cicilan_fix;

});

function addCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

});
2
  1. http://numeraljs.com/

As alternatives to → RegEx.

3

To make the input format dynamically might be a little bit confusing to the users (they type something and it changes). But if you want it anyway you can do something like this (and use for example the German locale which adds for thousands):

$w('#input1').onInput(() => {
$w('#input1').value = Number(
$w('#input1').value
.replaceAll('.','')
)
.toLocaleString('de-DE');
})

[EDITED]

4

P.S.
If you want it to be supported on old browser versions, use:

.split('.').join('')

instead of the .replaceAll() method.