<!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>