I have this mortgage calculator on my website (vuera.id)
On the mortgage page, I set up my input box when users put their numbers it automatically formatted to 123.456.789
But when the users clicked submit, the code only recognizing the first part of the numbers, e.g when the user inputs 550.000 the code only detects the 550 part
Here is my code (there are 4 input boxes that i formatted, #input1, #input2, #input6, and #input7)
Is there any workaround or solution about this? Thank you
$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;
if (uang_muka >= harga_rumah)
{
$w('#text30').text = ('Uang Muka tidak boleh lebih dari Harga Rumah');
exit();
}
if (uang_muka < 0.0 * harga_rumah)
{
$w('#text30').text = ('Uang Muka minimal 10 persen dari Harga Rumah');
exit();
}
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;
$w('#text38').text= persentase_cicilan_fix;
});
function addCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
});
$w.onReady(function () {
$w('#input1').onInput(() => {
$w('#input1').value = Number(
$w('#input1').value
.split('.').join('')
)
.toLocaleString('de-DE');
})
})
$w.onReady(function () {
$w('#input2').onInput(() => {
$w('#input2').value = Number(
$w('#input2').value
.split('.').join('')
)
.toLocaleString('de-DE');
})
})
$w.onReady(function () {
$w('#input6').onInput(() => {
$w('#input6').value = Number(
$w('#input6').value
.split('.').join('')
)
.toLocaleString('de-DE');
})
})
$w.onReady(function () {
$w('#input7').onInput(() => {
$w('#input7').value = Number(
$w('#input7').value
.split('.').join('')
)
.toLocaleString('de-DE');
})
})
You are converting the strings to integers in your code. Instead of parseInt() you want to use Number() .
Hi Yisrael, if i apply the Number() to parseInt(), what should i apply to parseFloat()? As of now, The results says NaN
$w.onReady(function () {
$w('#button6').onClick(function(){
var harga_rumah = Number($w('#input1').value);
var uang_muka = Number($w('#input2').value);
var margin = Number.parseFloat($w('#input4').value).toFixed(2);
var tenor = Number($w('#dropdown4').value);
var penghasilan = Number($w('#input6').value);
var cicilan_lain = Number($w('#input7').value);
const LIMIT = 40;
// error if...
if (uang_muka >= harga_rumah)
{
$w('#text30').text = ('Uang Muka tidak boleh lebih dari Harga Rumah');
exit();
}
if (uang_muka < 0.0 * harga_rumah)
{
$w('#text30').text = ('Uang Muka minimal 10 persen dari Harga Rumah');
exit();
}
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 = Number(total_pinjaman / tenor / 12);
var persentase_cilan = Number.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 = Number.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, ".");
}
});
$w.onReady(function () {
$w('#input1').onInput(() => {
$w('#input1').value = Number(
$w('#input1').value
.split('.').join('')
)
.toLocaleString('de-DE');
})
})
$w.onReady(function () {
$w('#input2').onInput(() => {
$w('#input2').value = Number(
$w('#input2').value
.split('.').join('')
)
.toLocaleString('de-DE');
})
})
$w.onReady(function () {
$w('#input6').onInput(() => {
$w('#input6').value = Number(
$w('#input6').value
.split('.').join('')
)
.toLocaleString('de-DE');
})
})
$w.onReady(function () {
$w('#input7').onInput(() => {
$w('#input7').value = Number(
$w('#input7').value
.split('.').join('')
)
.toLocaleString('de-DE');
})
})
Looking forward to your answer, Thanks!
It just doesn’t like the format. I think you will have to strip it back to being a true number (having the decimal point AND the radix character makes it a string).
I think you have three options really. Change your formatting to not include the radix, have the user submit with the radix but you manually remove in the code or potentially look at something like accounting.js (here https://openexchangerates.github.io/accounting.js ) and bring it into your code.
If you manually remove the radix in the code. You can then re-format the number back to the format with toLocaleString() as seen here ( https://www.w3schools.com/jsref/jsref_tolocalestring_number.asp ) which is a built in javascript function (no bringing in external libraries)
Hope this helps.