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: