{"id":1966,"date":"2017-08-26T15:22:32","date_gmt":"2017-08-26T09:52:32","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=1966"},"modified":"2017-08-26T15:45:20","modified_gmt":"2017-08-26T10:15:20","slug":"cash-receipts-denominations-using-phpjquery","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/cash-receipts-denominations-using-phpjquery\/","title":{"rendered":"cash receipts denominations using php,jquery"},"content":{"rendered":"<p><strong>Posted Date:26-08-2017<\/strong><\/p>\n<p>In this post we will explain how to create cash receipts denominations using php,jquery<\/p>\n<p>Step 1: Include jQuery \u00a0Plugin and css<\/p>\n<pre class=\"EnlighterJSRAW\">&lt;source  src=\"http:\/\/code.jquery.com\/jquery-2.2.4.min.js\"\r\n  integrity=\"sha256-BbhdlvQf\/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=\"\r\n  crossorigin=\"anonymous\"&gt;&lt;\/source&gt;\r\n   &lt;source type=\"text\/javascript\" charset=\"utf8\" src=\"https:\/\/cdn.datatables.net\/1.10.15\/js\/jquery.dataTables.min.js\"&gt;&lt;\/source&gt;\r\n\r\n\r\n<\/pre>\n<p>Step 2:Include following css code inside head tag<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">.mul_by{\r\n  width: 10%;\r\n}\r\n.mul_by .form-control{\r\n  display: inline-block;\r\n  width: 66%;\r\n  padding: 6px 4px;\r\n  text-align: center;\r\n}\r\n.mul_val .form-control{\r\n  display: inline-block;\r\n  width: 80%;\r\n  padding: 6px 4px;\r\n}\r\n.tab-title {\r\n    color: #31708f;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    margin-bottom: 1.5em;\r\n    margin-top: 1.5em;\r\n    text-align: center;\r\n}\r\n@media (max-width: 768px){\r\n  .mul_by{\r\n    width: 33.33%;\r\n  }\r\n  .control-label{\r\n    padding-top: 10px;\r\n  }\r\n}<\/pre>\n<p>Step 2:Include following script code inside head tag<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">\/\/experiment\r\n$(document).ready(function () {\r\n  $('.mul_by').each(function (i) {\r\n    var _this = $(this),\r\n        \/\/set default input value to zero inside .mul-by div\r\n        setZero = _this.find('.form-control').val(0),\r\n        \/\/set default input value to zero inside .mul-val div\r\n        setDenominationVal = _this.siblings('.mul_val').find('.form-control').val(0),\r\n        \/\/set default input value to zero inside .total div\r\n    \t\tsetTotalVal = $('.total').val(0);       \r\n    setZero.on('change keyup', function () {\r\n      var _that = $(this),\r\n          \/\/watch and store input val. inside .mul_by\r\n          getCurrentVal = _that.val(),\r\n  \t\t\t\t\/\/get label text and convert it to number\r\n          getDenominationVal = parseInt(_this.siblings('label').text()),\r\n  \t\t\t\t\/\/update mul_by div after multiplication\r\n          updateDenominationVal = _this.siblings('.mul_val').find('.form-control'),\r\n          \/\/update total if current val is set again to zero\r\n          changableVal = 0,\r\n          total = 0;\r\n      \/\/ setZero.on('keydown', function (e) {\r\n      \/\/ \t\/\/console.log(e.keyCode);\r\n      \/\/ \t\/\/prevent user from entering non-numeric values in input box \r\n      \/\/ \tif (e.keyCode &lt; 48 || e.keyCode &gt; 57){\r\n        \/\/   e.preventDefault();\r\n        \/\/   \/\/ alert('please add numeric values only');\r\n        \/\/ }\r\n      \/\/ });\r\n      \/\/ console.log('getCurrentVal', getCurrentVal, _that);\r\n      \/\/ console.log(getCurrentVal, getDenominationVal);\r\n      \/\/we are checking this condition for both = to 0 and &gt; 0, so if you again set the value to zero it'll still update the total accordingly\r\n      if(getCurrentVal &gt;= 0){\r\n      \t\/\/also check the multiplied value, if have value &gt; 0 then run this code\r\n   \t\t\tif(updateDenominationVal.val() &gt; 0){\r\n          changableVal = updateDenominationVal.val(getCurrentVal * getDenominationVal - updateDenominationVal.val());\r\n          total = parseInt(setTotalVal.val()) + parseInt(changableVal.val());\r\n          updateDenominationVal.val(getCurrentVal * getDenominationVal);\r\n          \/\/ console.log('total: ' + total, 'setTotal: ' + setTotalVal.val(), changableVal.val()); \r\n    \t\t} else { \/\/ value not &gt; 0 means in our case default is zero, then run this code \r\n          changableVal = updateDenominationVal.val(getCurrentVal * getDenominationVal);\r\n          \/\/ updateDenominationVal.val(getCurrentVal * getDenominationVal);\r\n          total = parseInt(setTotalVal.val()) + parseInt(changableVal.val());\r\n        }\r\n    \t\t\/\/ console.log(changableVal.val());\r\n    \t\t\/\/update the total value after calculating all values\r\n      \tsetTotalVal.val(total);\r\n      } else { \/\/ if negative numbers then set the last input box values to\r\n        updateDenominationVal.val(0);\r\n      }\r\n    });\r\n  });\r\n});\r\n\r\n$('#cashreceipts-card-form').on('submit', function (e) {\r\n  if(parseInt($('.total').val()) === 0){\r\n    \/\/ alert('atleast fill some values');\r\n    e.preventDefault();\r\n  }\r\n});<\/pre>\n<p>&nbsp;<\/p>\n<p>Step 2:Include following html code inside body tag<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n   <form class=\"form-horizontal\" method=\"post\" id=\"cashreceipts-card-form\" action=\"void(0);\" role=\"form\">\r\n\t\t\t\t\t\t  <div class=\"form-group\">\r\n\t\t\t\t\t\t    <label class=\"control-label col-md-2 col-xs-2\" for=\"batch\">2000<\/label>\r\n\t\t\t\t\t\t    <div class=\"col-md-1 col-xs-4 mul_by\">\r\n\t\t\t\t\t\t      <span>x <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t    <div class=\"col-md-3 col-xs-5 mul_val\">\r\n\t\t\t\t\t\t      <span style=\"font-size: 18px\">= <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t  <div class=\"form-group\">\r\n\t\t\t\t\t\t    <label class=\"control-label col-md-2 col-xs-2\" for=\"batch\">500<\/label>\r\n\t\t\t\t\t\t    <div class=\"col-md-1 col-xs-4 mul_by\">\r\n\t\t\t\t\t\t      <span>x <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t    <div class=\"col-md-3 col-xs-5 mul_val\">\r\n\t\t\t\t\t\t      <span style=\"font-size: 18px\">= <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t  <div class=\"form-group\">\r\n\t\t\t\t\t\t    <label class=\"control-label col-md-2 col-xs-2\" for=\"batch\">100<\/label>\r\n\t\t\t\t\t\t    <div class=\"col-md-1 col-xs-4 mul_by\">\r\n\t\t\t\t\t\t      <span>x <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t    <div class=\"col-md-3 col-xs-5 mul_val\">\r\n\t\t\t\t\t\t      <span style=\"font-size: 18px\">= <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t  <div class=\"form-group\">\r\n\t\t\t\t\t\t    <label class=\"control-label col-md-2 col-xs-2\" for=\"batch\">50<\/label>\r\n\t\t\t\t\t\t    <div class=\"col-md-1 col-xs-4 mul_by\">\r\n\t\t\t\t\t\t      <span>x <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t    <div class=\"col-md-3 col-xs-5 mul_val\">\r\n\t\t\t\t\t\t      <span style=\"font-size: 18px\">= <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t  <div class=\"form-group\">\r\n\t\t\t\t\t\t    <label class=\"control-label col-md-2 col-xs-2\" for=\"batch\">20<\/label>\r\n\t\t\t\t\t\t    <div class=\"col-md-1 col-xs-4 mul_by\">\r\n\t\t\t\t\t\t      <span>x <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t    <div class=\"col-md-3 col-xs-5 mul_val\">\r\n\t\t\t\t\t\t      <span style=\"font-size: 18px\">= <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t  <div class=\"form-group\">\r\n\t\t\t\t\t\t    <label class=\"control-label col-md-2 col-xs-2\" for=\"batch\">10<\/label>\r\n\t\t\t\t\t\t    <div class=\"col-md-1 col-xs-4 mul_by\">\r\n\t\t\t\t\t\t      <span>x <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t    <div class=\"col-md-3 col-xs-5 mul_val\">\r\n\t\t\t\t\t\t      <span style=\"font-size: 18px\">= <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t  <div class=\"form-group\">\r\n\t\t\t\t\t\t    <label class=\"control-label col-md-2 col-xs-2\" for=\"batch\">5<\/label>\r\n\t\t\t\t\t\t    <div class=\"col-md-1 col-xs-4 mul_by\">\r\n\t\t\t\t\t\t      <span>x <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t    <div class=\"col-md-3 col-xs-5 mul_val\">\r\n\t\t\t\t\t\t      <span style=\"font-size: 18px\">= <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t  <div class=\"form-group\">\r\n\t\t\t\t\t\t    <label class=\"control-label col-md-2 col-xs-2\" for=\"batch\">2<\/label>\r\n\t\t\t\t\t\t    <div class=\"col-md-1 col-xs-4 mul_by\">\r\n\t\t\t\t\t\t      <span>x <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t    <div class=\"col-md-3 col-xs-5 mul_val\">\r\n\t\t\t\t\t\t      <span style=\"font-size: 18px\">= <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t  <div class=\"form-group\">\r\n\t\t\t\t\t\t    <label class=\"control-label col-md-2 col-xs-2\" for=\"batch\">1<\/label>\r\n\t\t\t\t\t\t    <div class=\"col-md-1 col-xs-4 mul_by\">\r\n\t\t\t\t\t\t      <span>x <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t    <div class=\"col-md-3 col-xs-5 mul_val\">\r\n\t\t\t\t\t\t      <span style=\"font-size: 18px\">= <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t  <div class=\"form-group\">\r\n\t\t\t\t\t\t  \t<hr>\r\n\t\t\t\t\t\t    <label class=\"control-label col-md-2 col-xs-2\" for=\"batch\">total:<\/label>\r\n\t\t\t\t\t\t    <div class=\"col-md-3 col-xs-5 mul_val\">\r\n\t\t\t\t\t\t      <span style=\"font-size: 18px\">= <\/span>&nbsp;&lt;input type=\"text\" class=\"form-control total\" id=\"amount\" name=\"amount\"&gt;\r\n\t\t\t\t\t\t    <\/div>\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t  <div class=\"update-btn\">\r\n\t\t\t\t\t\t  \t<button type=\"submit\" class=\"btn btn-success btn-sm\">save<\/button>\r\n\t\t\t\t\t\t  \t<button type=\"reset\" class=\"btn btn-danger btn-sm\">clear<\/button>\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/form>\r\n<\/pre>\n<p><strong>DEMO LINK:<a href=\"http:\/\/demo.pheonixsolutions.com\/php\/cash-denominations-jquery\/\">http:\/\/demo.pheonixsolutions.com\/php\/cash-denominations-jquery\/<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Posted Date:26-08-2017 In this post we will explain how to create cash receipts denominations using php,jquery Step 1: Include jQuery [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[350,273],"class_list":["post-1966","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-javascriptjquery","tag-php","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-vI","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=1966"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1966\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=1966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=1966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=1966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}