.


Divya


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() {
//alert("Content " +this.id);
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



.