CODEWITHSUNDEEP
javascripthtmlforms
Vic
Vic

Reputation: 637

Adding multiple HTML form input values in JavaScript

I am bewildered as to why I cannot add three numbers together. Here is my HTML:

<div><label>Sales Price: </label>
    <input type="number" name="sales_price" value="3">
</div>
<div><label>Incentives: </label>
    <input type="number" name="incentives" value="2">
</div>    
<div><label>Acquisition Fee: </label>
    <input type="number" name="acq_fee" value="1">

Here is my JavaScript:

var salesPrice = document.getElementsByName("sales_price")[0];
var incentives = document.getElementsByName("incentives")[0];
var acqFee = document.getElementsByName("acq_fee")[0];

var netCapCost = salesPrice.value - incentives.value + acqFee.value;

I wanted a simple calculation to be done: (3-2+1) = 2. However, netCapCost returns 11, which is the concatenation of the result of (3-2) and 1. What did I do wrong? Many Thanks in advance!

Upvotes: 2

Views: 192

Answers (4)

PC3TJ
PC3TJ

Reputation: 852

var salesPrice;
var incentives;
var acqFee;
var npc;


function calculate(e) {
    var netCapCost = (parseFloat(salesPrice.value) - parseFloat(incentives.value) + parseFloat(acqFee.value)).toPrecision(3);
    npc.value = netCapCost;
}

window.onload = function (){
	
	
salesPrice = document.getElementsByName("sales_price")[0];
incentives = document.getElementsByName("incentives")[0];
acqFee = document.getElementsByName("acq_fee")[0];
npc = document.getElementsByName("npc")[0];
	salesPrice.onchange = calculate;
	calculate();
	
	
};

Your problem is that text fields value is always of type STRING. When subtracting it forces a conversion to type FLOAT. Then the plus operation shares an opperator with the concatenate operation. So when you have two strings being added it concatenates rather than converting to FLOAT or INT. So basically you have "2"-"1" being converted to 2-1 as strings cannot be subtracted which gives you (1) then you have (1)+"1" which will concatenate rather than add as you have a string. Always use parseFloat or parseInt when expecting numeric data from user entry as it will always be a string when originally submitted.

Upvotes: 1

Gaurav Daga
Gaurav Daga

Reputation: 343

I think confusion here is HTML 5 introduces input type number however javascript engine doesn't introduce support for reading such specific fields. We end up using old traditional way of reading input field value which defaults everything to string.

Only advantage of using number type field would be that you do not have to worry about exception/erroneous situation where number is not being entered.

Other answer suggesting to use parseInt function, is the way to go unless you have luxury of introducing javascript framework like jQuery and use more sophisticated approach for reading it.

Upvotes: 1

Sean
Sean

Reputation: 3052

you are doing a string concatation, all value get from input value are string,

the first calcuation salesPrice.value - incentives.value is currect is becuase, the - sign convert the incentives.value to number

the currect way is 

var netCapCost = parseInt(salesPrice.value, 10) - parseInt(incentives.value, 10) + parseInt(acqFee.value, 10);

it's better to use a Math library to do the calcuation in javascript, because sooner or later, you will encounter the problem like 0.3 - 0.2 = 0.09999999

Upvotes: 1

Griffith
Griffith

Reputation: 3217

You need to convert those values into numbers with parseInt() or else the + operator will be interpreted as string concatenation. You are doing 

var netCapCost = salesPrice.value - incentives.value + acqFee.value;

Which is

var netCapCost = "3" - "2" + "1"

"3"-"2" will return 1, which is what you want but 1 + "1" will be concatenated into "11" since the right operand is a string. So Number + String -> concatenation

Upvotes: 2

Related Questions