CODEWITHSUNDEEP
javascriptruby-on-railsonchange
Pavan
Pavan

Reputation: 33542

Adding Two Textfield values and showing the result in another textfield by using OnChange in Javascript

I have 2 text fields: "Earnings" and "Deductions",earnings has some components like HRA,Basic pay etc and deductions also has some..

I have another 2 text fields "Total Earnings" and "Total Deductions" 

Total Earnings = earning component1 + earning component2

Total Deductions = deduction component1 + deduction component2

What i want is i need to write two functions for showing the results in Total Earnings and Total Deductions.I mean if i enter the values for "Earnings" and "deductions", those should automatically reflect in "Total Earnings" and "Total Deductions"

Upvotes: 0

Views: 881

Answers (3)

Prabhat Jain
Prabhat Jain

Reputation: 346

You just need to set the keyup function for the textbox.

 <script type="text/javascript">
   function setval()
   {
      document.getElementById('totearng').value = document.getElementById('earng').value;
      document.getElementById('totdedtn').value = document.getElementById('dedtn').value;
   }
 </script>
 <body>
     Earning : <input type="text" id='earng' onkeyup="setval()"/><br/>
     Deduction : <input type="text" id='dedtn' onkeyup="setval()"/><br/>
     Total Earning : <input type="text" id='totearng'/><br/>
     Total Deduction : <input type="text" id='totdedtn'/>
 </body>

Upvotes: 3

Amit
Amit

Reputation: 2585

<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
    var x=(document.getElementById("deduction").value);
    var y=(document.getElementById("collection").value);
    document.getElementById("total").value=Number(x)+Number(y);
}
</script>
</head>
<body>

<form>
    Deduction: <input type="text" id="deduction" onchange="displayResult()">
    Collection: <input type="text" id="collection" onchange="displayResult()">
    Total:<input type="text" id="total">
</form>
</body>
</html>

Try like this

Upvotes: 0

user2663434
user2663434

Reputation:

use javascript for calculation

function cal()
{
//calculation part here
//var total_earning = your result

//Earnings textbox
document.getElementById(textfield_name1).value = total_earning;

//Deductionstextbox
document.getElementById(textfield_name2).value = total_earning;
}

Upvotes: 0

Related Questions