Javascript Textbox Values output NAN on.Change

Question

I am really really new to javascript and tried googling. but I don't find any luck. So please help me, everytime i input a value into a textbox. the other textbox's will show "nan" then when I tried to change the NaN Value, the first textbox that I typed in to will return the first thousand digits of the value.

here is the Fiddle of my proble

and these are my codes

$(document).on('change', '#family_home,#home_contents,#motor_vehicle,#Total', function() {
updateTotal();
    });       
var updateTotal =function() {
var a = parseInt($('#family_home').val());
$('#family_home').val(a.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
var b = parseInt($('#home_contents').val());
$('#home_contents').val(b.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
var c = parseInt($('#motor_vehicle').val());
$('#motor_vehicle').val(c.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
var total = parseInt(a)+parseInt(b)+parseInt(c);   
$("#Total").html(total);         
};

Please Please help. Thanks. I know im a newbie but I want to gain more knowledge from you guys. so please pass it on to me. Thanks

Duplicates -http://stackoverflow.com/questions/7295843/allow-only-numbers-to-be-typed-in-a-textbox, http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery, — Deepak Ingole, Jan 30 '14 at 05:27

score 0 · Answer 1 · answered Jan 30 '14 at 05:22

NaN property is a value that represents "Not-a-number". To avoid this behavior in your code, you might use the isNaN() function:

$(document).on('change', '#family_home,#home_contents,#motor_vehicle,#Total', function() {
    updateTotal();
    });       
var updateTotal =function() {
var a = parseInt($('#family_home').val());
    $('#family_home').val(a.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
var b = parseInt($('#home_contents').val());
    if (!isNaN(b))
    $('#home_contents').val(b.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
var c = parseInt($('#motor_vehicle').val());
    if (!isNaN(c))
    $('#motor_vehicle').val(c.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
var total = parseInt(a)+parseInt(b)+parseInt(c);   
    $("#Total").html(total);         
};

http://jsfiddle.net/hescano/zzxwV/6/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN

kcak11 · Accepted Answer · 2014-01-30T05:46:55.640

-1

Please use this code:

$(document).on('change', '#family_home,#home_contents,#motor_vehicle,#Total', function() {
    updateTotal();
    });       
    var updateTotal =function() {
    var re=new RegExp(",","g");
    var a = parseInt($('#family_home').val().replace(re,""),10);
    if(!isNaN(a))
    $('#family_home').val(a.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
    var b = parseInt($('#home_contents').val().replace(re,""),10);
    if (!isNaN(b))
    $('#home_contents').val(b.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
    var c = parseInt($('#motor_vehicle').val().replace(re,""),10);
    if (!isNaN(c))
    $('#motor_vehicle').val(c.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
    var total = parseInt(a)+parseInt(b)+parseInt(c);   
    $("#Total").html(total);         
};

edited Jan 30 '14 at 05:46

answered Jan 30 '14 at 05:22

kcak11

832
7
19

wow thanks, this totally works. but how can I set each textbox to automatically output the comma's when i clicked on the next texbox? I tried .on('keyup') but it returns the whole number to the first thousands. – user3192596 Jan 30 '14 at 05:29
For output commas, you will have use your current logic for string replace. but be careful, while reading the values and passing them to parseInt make sure that you again replace the commas with empty string i.e. "" so that parseInt parses the inputs correctly. Also while using parseInt always include a second argument i.e. parseInt(mytext,10); the second argument 10 ensures that you want the parsed value to be in decimal (10) system. other possibilities are 2 (binary), 16 (hexadecimal), 8 (octal). – kcak11 Jan 30 '14 at 05:34
Hi, I have updated the code above to reflect what you want. Could not save the fiddle due to some error. – kcak11 Jan 30 '14 at 05:47
Why -1 to my answer ? Please specify the reason. – kcak11 Jan 30 '14 at 05:52
This really is awesome, Thank you for you help. I wish I could vote for your answer. This really helped me. THanks so much – user3192596 Jan 30 '14 at 05:53
Oh, I am new to Stackexchange, I was not aware that there is a chat feature available. I will check it out next time !! thanks for notifying. – kcak11 Jan 30 '14 at 05:54

Javascript Textbox Values output NAN on.Change

2 Answers2