Sum HTML Textbox Values using JavaScript

Here is a small code snippet to sum the values of all textboxes using JavaScript. I wrote it for some functionality and thought to share it with you all. The requirement is simple, whenever user modify the value of a textbox, the fresh sum should be calculated and displayed on the other Textbox. I used JavaScript for this..

Source Code

HTML Form

<table>
  <tr>
    <th colspan="6">AMOUNT (USD)</th>
  </tr>
  <tr>
    <td>Base Price</td>
    <td><input type="text" name="base_price" class="inputField" id="txt1" value=""  onkeyup="sum();" style="width:80px;" placeholder="0.00"/></td>
  </tr>
  <tr>
    <td>Shipping Charge</td>
    <td><input type="text" name="shipping_charge" class="inputField" id="txt2" value=""  onkeyup="sum();" style="width:80px;" placeholder="0.00"/></td>
  </tr>
  <tr>
    <td>Tax</td>
    <td><input type="text" name="tax" class="inputField" id="txt3" value=""  onkeyup="sum();" style="width:80px;" placeholder="0.00"/></td>
  </tr>
  <tr>
    <td>Total Amount</td>
    <td><input type="text" name="total_price" class="inputField" id="txt4" value="" style="width:80px;" placeholder="0.00" readonly="readonly"/></td>
  </tr>
</table>

JavaScript Code

<script type="text/javascript">
//amount sum
function sum() {
  var txt1Value = document.getElementById('txt1').value;
  var txt2Value = document.getElementById('txt2').value;
  var txt3Value = document.getElementById('txt3').value;
  var result = parseInt(txt1Value) + parseInt(txt2Value) + parseInt(txt3Value);
  if (!isNaN(result)) {
 	document.getElementById('txt4').value = result;
  }
}     
 </script>

Following is the complete source code.

<table>
  <tr>
    <th colspan="6">AMOUNT (USD)</th>
  </tr>
  <tr>
    <td>Base Price</td>
    <td><input type="text" name="base_price" class="inputField" id="txt1" value=""  onkeyup="sum();" style="width:80px;" placeholder="0.00"/></td>
  </tr>
  <tr>
    <td>Shipping Charge</td>
    <td><input type="text" name="shipping_charge" class="inputField" id="txt2" value=""  onkeyup="sum();" style="width:80px;" placeholder="0.00"/></td>
  </tr>
  <tr>
    <td>Tax</td>
    <td><input type="text" name="tax" class="inputField" id="txt3" value=""  onkeyup="sum();" style="width:80px;" placeholder="0.00"/></td>
  </tr>
  <tr>
    <td>Total Amount</td>
    <td><input type="text" name="total_price" class="inputField" id="txt4" value="" style="width:80px;" placeholder="0.00" readonly="readonly"/></td>
  </tr>
</table>
<script type="text/javascript">
//amount sum
function sum() {
  var txt1Value = document.getElementById('txt1').value;
  var txt2Value = document.getElementById('txt2').value;
  var txt3Value = document.getElementById('txt3').value;
  var result = parseInt(txt1Value) + parseInt(txt2Value) + parseInt(txt3Value);
  if (!isNaN(result)) {
 	document.getElementById('txt4').value = result;
  }
}     
 </script>

That’s it I hope you like it please comment your feedback.

Please follow and like us: