0

I Have 4 text boxes namely customer_phy_tot, customer_che_tot, customer_bio_tot. I'm trying to add and display all 3 input boxes values to a 4th input, customer_pcb_tot.

customer_bio_obt.blur(function(){
    var customer_pcb_tot = isNaN(parseInt($("#customer_phy_tot").val() + $("#customer_che_tot").val() + $("#customer_bio_tot").val())) ? 0 :( $("#customer_phy_tot").val() + $("#customer_che_tot").val() + $("#customer_bio_tot").val())
    $("#customer_pcb_tot").val(customer_pcb_tot);
});

The problem is instead of adding my code is treating it as a string. Suppose I have values 10, 15 and 5 respectively. It's supposed to display 30 in the 4th box but in my case it is showing 10155.

Any help greatly appreciated.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Sha
  • 506
  • 2
  • 6
  • 22

3 Answers3

3

Use parseInt() function to do this :)

You have to use it to each of your values do make it works.

As @Jamie R Rytlewski said :

Make sure you use the radix value also. parseInt(string, radix);

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

Vincent G
  • 8,547
  • 1
  • 18
  • 36
  • 2
    But make sure you use the radix value also. parseInt(string, radix); https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt – Jamie R Rytlewski Apr 01 '16 at 14:16
  • radix is 10 by default – teran Apr 01 '16 at 14:16
  • 1
    It's still considered best practice to always include it. From MDN: `Always specify this parameter to eliminate reader confusion and to guarantee predictable behavior.` – Rory McCrossan Apr 01 '16 at 14:17
  • 1
    http://stackoverflow.com/questions/850341/how-do-i-work-around-javascripts-parseint-octal-behavior has details on why to always include it as well – Mark Schultheiss Apr 01 '16 at 14:20
  • but anyway, from MDN references: http://www.ecma-international.org/ecma-262/6.0/#sec-parseint-string-radix says (`in 10-11`) radix should be 10 by default, – teran Apr 01 '16 at 14:26
  • It will be 10 by default... unless someone enters a string where the leading character is a zero, in which it goes to base 8 – Rory McCrossan Apr 01 '16 at 14:27
  • @RoryMcCrossan does it depend on user browser? – teran Apr 01 '16 at 14:32
  • No as it's how the javascript standard is written, not any specific browser implementation. – Rory McCrossan Apr 01 '16 at 14:37
  • @RoryMcCrossan it looks like it is not a problem for modern browsers. as at http://www.breakingpar.com/bkp/home.nsf/0/87256B280015193F87256C85006A6604 ( from links above) everything works fine. – teran Apr 01 '16 at 14:41
3

You're using parseInt() already, but you need to use it on the string values returned by each individual val() call. Also note that your use of a ternary expression is redundant. Try this:

customer_bio_obt.blur(function() {
    var customer_pcb_tot = parseInt($("#customer_phy_tot").val(), 10) + parseInt($("#customer_che_tot").val(), 10) + parseInt($("#customer_bio_tot").val(), 10);
    $("#customer_pcb_tot").val(customer_pcb_tot || 0);
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
0

You can parseInt() in each val() that you ask. Or multiply each one for 1 before sum it.

var customer_pcb_tot= isNaN(parseInt($("#customer_phy_tot").val() + $("#customer_che_tot").val() + $("#customer_bio_tot").val())) ? 0 :( $("#customer_phy_tot").val()*1 + $("#customer_che_tot").val()*1 + $("#customer_bio_tot").val()*1)

Yargo.ar
  • 83
  • 10