Javascript On Input Field Addition

I am giving values to input fields its adding concatination but not adding please verify it on input function is correct or wrong once verify then reply me thats it my question.

Solution 1:

You have strings, that is why it is concatenating. Make integers with: http://www.w3schools.com/jsref/jsref_parseint.asp

And it will work well.

Solution 2:

First, when you read values from DOM, they are read as string. You will have to use parseInt or parseFloat to convert string to integer.

Second, + operator has a override function for string to act as concatenation operator.

Also notice, I have used .value || 0. Here if value does not exist, performing arithmetic operation over it will return NaN so adding default value (0).

//// JavaScript function to add input values display into another input field 
function calculate() {
  var x = document.getElementById('fee_selector_holder').value || 0;
  var y = document.getElementById('content').value || 0;
  var result = document.getElementById('result');
  var myResult = parseInt(x) + parseInt(y);
  result.value = myResult;

}

<input type="text" name="hostelfees" id="content" oninput="calculate()">

<input type="text" name="fee_id" id="fee_selector_holder" oninput="calculate()">

<input type="text" id="result" name="totalfee">

Solution 3:

You have to parse the input values to integer as all input values are string by default:

//// JavaScript function to add input values display into another input field 
function calculate() {
  var x = document.getElementById('fee_selector_holder').value || 0; // default value 0 if input is blank
  var y = document.getElementById('content').value || 0; // default value 0 if input is blank
  var result = document.getElementById('result');
  var myResult = parseInt(x, 10) + parseInt(y, 10); // parse it here 
  result.value = myResult;

}

<input type="text" name="hostelfees" id="content" oninput="calculate()">

<input type="text" name="fee_id" id="fee_selector_holder" oninput="calculate()">

<input type="text" id="result" name="totalfee">

Solution 4:

You should add attribute to result

result.setAttribute("value", myResult);