HTML - a table where the product name and price TextBox is found.
<table> <tr> <td>Product Name</td> <td>Price</td> </tr> <tr> <td>MOBILE POWER BANK (2800MAH)</td> <td><input type='text' class='price' /></td> </tr> <tr> <td>DISNEY NECK REST PILLOW (CHIP)</td> <td><input type='text' class='price' /></td> </tr> <tr> <td></td> <td><input type='text' id='totalPrice' disabled /></td> </tr> </table>
<script> // we used jQuery 'keyup' to trigger the computation as the user type $('.price').keyup(function () { // initialize the sum (total price) to zero var sum = 0; // we use jQuery each() to loop through all the textbox with 'price' class // and compute the sum for each loop $('.price').each(function() { sum += Number($(this).val()); }); // set the computed value to 'totalPrice' textbox $('#totalPrice').val(sum); }); </script>
Complete Code:
This post will be updated if any variation occurs. :)
<html> <head> <title>jQuery Sum Demo</title> </head> <body> <table> <tr> <td>Product Name</td> <td>Price</td> </tr> <tr> <td>MOBILE POWER BANK (2800MAH)</td> <td><input type='text' class='price' /></td> </tr> <tr> <td>DISNEY NECK REST PILLOW (CHIP)</td> <td><input type='text' class='price' /></td> </tr> <tr> <td></td> <td><input type='text' id='totalPrice' disabled /></td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> <script> // we used jQuery 'keyup' to trigger the computation as the user type $('.price').keyup(function () { // initialize the sum (total price) to zero var sum = 0; // we use jQuery each() to loop through all the textbox with 'price' class // and compute the sum for each loop $('.price').each(function() { sum += Number($(this).val()); }); // set the computed value to 'totalPrice' textbox $('#totalPrice').val(sum); }); </script> </body> </html>
This post will be updated if any variation occurs. :)
For FREE programming tutorials, click the red button below and subscribe! :)
website