Posted Date:26-08-2017
In this post we will explain how to create cash receipts denominations using php,jquery
Step 1: Include jQuery Plugin and css
<source src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></source> <source type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></source>
Step 2:Include following css code inside head tag
.mul_by{
width: 10%;
}
.mul_by .form-control{
display: inline-block;
width: 66%;
padding: 6px 4px;
text-align: center;
}
.mul_val .form-control{
display: inline-block;
width: 80%;
padding: 6px 4px;
}
.tab-title {
color: #31708f;
font-size: 14px;
font-weight: 600;
margin-bottom: 1.5em;
margin-top: 1.5em;
text-align: center;
}
@media (max-width: 768px){
.mul_by{
width: 33.33%;
}
.control-label{
padding-top: 10px;
}
}
Step 2:Include following script code inside head tag
//experiment
$(document).ready(function () {
$('.mul_by').each(function (i) {
var _this = $(this),
//set default input value to zero inside .mul-by div
setZero = _this.find('.form-control').val(0),
//set default input value to zero inside .mul-val div
setDenominationVal = _this.siblings('.mul_val').find('.form-control').val(0),
//set default input value to zero inside .total div
setTotalVal = $('.total').val(0);
setZero.on('change keyup', function () {
var _that = $(this),
//watch and store input val. inside .mul_by
getCurrentVal = _that.val(),
//get label text and convert it to number
getDenominationVal = parseInt(_this.siblings('label').text()),
//update mul_by div after multiplication
updateDenominationVal = _this.siblings('.mul_val').find('.form-control'),
//update total if current val is set again to zero
changableVal = 0,
total = 0;
// setZero.on('keydown', function (e) {
// //console.log(e.keyCode);
// //prevent user from entering non-numeric values in input box
// if (e.keyCode < 48 || e.keyCode > 57){
// e.preventDefault();
// // alert('please add numeric values only');
// }
// });
// console.log('getCurrentVal', getCurrentVal, _that);
// console.log(getCurrentVal, getDenominationVal);
//we are checking this condition for both = to 0 and > 0, so if you again set the value to zero it'll still update the total accordingly
if(getCurrentVal >= 0){
//also check the multiplied value, if have value > 0 then run this code
if(updateDenominationVal.val() > 0){
changableVal = updateDenominationVal.val(getCurrentVal * getDenominationVal - updateDenominationVal.val());
total = parseInt(setTotalVal.val()) + parseInt(changableVal.val());
updateDenominationVal.val(getCurrentVal * getDenominationVal);
// console.log('total: ' + total, 'setTotal: ' + setTotalVal.val(), changableVal.val());
} else { // value not > 0 means in our case default is zero, then run this code
changableVal = updateDenominationVal.val(getCurrentVal * getDenominationVal);
// updateDenominationVal.val(getCurrentVal * getDenominationVal);
total = parseInt(setTotalVal.val()) + parseInt(changableVal.val());
}
// console.log(changableVal.val());
//update the total value after calculating all values
setTotalVal.val(total);
} else { // if negative numbers then set the last input box values to
updateDenominationVal.val(0);
}
});
});
});
$('#cashreceipts-card-form').on('submit', function (e) {
if(parseInt($('.total').val()) === 0){
// alert('atleast fill some values');
e.preventDefault();
}
});
Step 2:Include following html code inside body tag
DEMO LINK:http://demo.pheonixsolutions.com/php/cash-denominations-jquery/