Javascript Ajax jQuery Html PHP Example Quiz New MORE

jQuery code to calculate the denomination of the amount deposited

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>Denomination</title>
    <!-- Favicon-->
    <script>
        $(document).ready(function() {
            $('.noteCount').change(function() {
                countId = this.id;
                denomination = countId.substring(1, countId.length);
                amountId = "t" + denomination;
                amountEle = document.getElementById(amountId);
                x = parseFloat(this.value) * parseFloat(denomination);
                amountEle.innerHTML = x;
                refreshTotal();
            });

            function refreshTotal() {
                sum = 0;
                $('.grand').each(function(index) {
                    sum += parseFloat(this.innerHTML);
                });
                grandTotal = document.getElementById("grandTotal");
                grandTotal.innerHTML = sum;
            };
        });
    </script>
    <style>
        /*** Table Styles **/

        .table-fill {
            background: white;
            border-radius: 3px;
            border-collapse: collapse;
            height: 320px;
            margin: auto;
            max-width: 600px;
            padding: 5px;
            width: 50%;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            animation: float 5s infinite;
        }

        th {
            color: #D5DDE5;
            background: #1b1e24;
            border-bottom: 4px solid #9ea7af;
            border-right: 1px solid #343a45;
            font-size: 20px;
            font-weight: 100;
            padding: 24px;
            text-align: left;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            vertical-align: middle;
        }

        th:first-child {
            border-top-left-radius: 3px;
        }

        th:last-child {
            border-top-right-radius: 3px;
            border-right: none;
        }

        tr {
            border-top: 1px solid #C1C3D1;
            border-bottom-: 1px solid #C1C3D1;
            color: #666B85;
            font-size: 16px;
            font-weight: normal;
            text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
        }

        tr:hover td {
            background: #4E5066;
            color: #FFFFFF;
            border-top: 1px solid #22262e;
        }

        tr:first-child {
            border-top: none;
        }

        tr:last-child {
            border-bottom: none;
        }

        tr:nth-child(odd) td {
            background: #EBEBEB;
        }

        tr:nth-child(odd):hover td {
            background: #4E5066;
        }

        tr:last-child td:first-child {
            border-bottom-left-radius: 3px;
        }

        tr:last-child td:last-child {
            border-bottom-right-radius: 3px;
        }

        td {
            background: #FFFFFF;
            padding: 10px;
            text-align: left;
            vertical-align: middle;
            font-weight: 300;
            font-size: 18px;
            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
            border-right: 1px solid #C1C3D1;
        }

        td:last-child {
            border-right: 0px;
        }

        th.text-left {
            text-align: left;
        }

        th.text-center {
            text-align: center;
        }

        th.text-right {
            text-align: right;
        }

        td.text-left {
            text-align: left;
        }

        td.text-center {
            text-align: center;
        }

        td.text-right {
            text-align: right;
        }
    </style>
</head>
<form method="post" action="deposit_process.php">
    <div class="table-title">
        <h3 align="center">DEPOSIT TABLE</h3>
    </div>
    <div align="left">
        <table class="table-fill">
            <thead>
                <tr>
                    <th class="text-left">NOTES</th>
                    <th class="text-left">Count</th>
                    <th class="text-left">Amount</th>
                </tr>
            </thead>
            <tbody class="table-hover">
                <tr>
                    <td class="text-left">2000X</td>
                    <td><input type="text" class="noteCount" id="x2000" name="INR2000"></td>
                    <td class="grand" id="t2000">0</td>
                </tr>
                <tr>
                    <td class="text-left">500X</td>
                    <td> <input type="text" class="noteCount" id="x500" name="INR500"></td>
                    <td class="grand" id="t500">0</td>
                </tr>
                <tr>
                    <td class="text-left">200X</td>
                    <td><input type="text" class="noteCount" id="x200" name="INR200"></td>
                    <td class="grand" id="t200">0</td>
                </tr>
                <tr>
                    <td class="text-left">100X</td>
                    <td><input type="text" class="noteCount" id="x100" name="INR100"></td>
                    <td class="grand" id="t100">0</td>
                </tr>
                <tr>
                    <td class="text-left">50X</td>
                    <td><input type="text" class="noteCount" id="x50" name="INR50"></td>
                    <td class="grand" id="t50">0</td>
                </tr>
                <tr>
                    <td class="text-left">20X</td>
                    <td><input type="text" class="noteCount" id="x20" name="INR20"></td>
                    <td class="grand" id="t20">0</td>
                </tr>
                <tr>
                    <td class="text-left">10X</td>
                    <td><input type="text" class="noteCount" id="x10" name="INR10"></td>
                    <td class="grand" id="t10">0</td>
                </tr>
                <tr>
                    <td class="text-left">5X</td>
                    <td><input type="text" class="noteCount" id="x5" name="INR5"></td>
                    <td class="grand" id="t5">0</td>
                </tr>
                <tr>
                    <td class="text-left">2X</td>
                    <td><input type="text" class="noteCount" id="x2" name="INR2"></td>
                    <td class="grand" id="t2">0</td>
                </tr>
                <tr>
                    <td class="text-left">1X</td>
                    <td><input type="text" class="noteCount" id="x1" name="INR1"></td>
                    <td class="grand" id="t1">0</td>
                </tr>
                <tr>
                    <td class="text-left">Total</td>
                    <td class="text-left"></td>
                    <td class="text-left" contenteditable="false" id="grandTotal" name="tatal">0</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--<input type="checkbox" id="remember_me" class="filled-in">
<label for="remember_me">Remember Me</label>-->
    <br>
    <p align="center"><button type="submit" name="save" class="btn btn-primary m-t-15 waves-effect">SUBMIT</button></p>
</form>
</body>
</html>

Run it yourself