{"id":9692,"date":"2022-12-16T18:46:49","date_gmt":"2022-12-16T13:16:49","guid":{"rendered":"https:\/\/selfimagination.in\/tips\/?p=9692"},"modified":"2023-04-14T15:57:43","modified_gmt":"2023-04-14T10:27:43","slug":"complete-invoice-with-calculation","status":"publish","type":"post","link":"https:\/\/selfimagination.in\/tips\/complete-invoice-with-calculation\/","title":{"rendered":"Complete Invoice with Calculation + Print (Bootstrap + JS + jQuery) its Free"},"content":{"rendered":"\n<p>Invoice with calculation and format, how to make invoice, invoice js, invoice css, Complete Invoice Using HTML, Bootstrap, js , jQuery With Print Format, how to create invoice with calculation step by step.    <\/p>\n\n\n\n<p>\u0907\u0938 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 (Invoice with Calculation) \u092e\u0947 \u0939\u092e\u0928\u0947 \u0906\u092a\u0915\u094b Bootstrap \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 Invoice \u092c\u0928\u093e\u0928\u093e \u092c\u0924\u093e\u092f\u093e \u0939\u0948 \u0964 \u0938\u093e\u0925 \u092e\u0947 \u0907\u0938 Article \u092e\u0947 Media Query  \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 Print format \u0915\u0948\u0938\u0947 \u092c\u0928\u093e\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0909\u0938\u0915\u0947 \u092c\u093e\u0930 \u092e\u0947 \u092d\u0940 \u092c\u0924\u093e\u092f\u093e \u0939\u0948\u0902 \u0964 \u0907\u0938\u0940 \u0915\u0947 \u0938\u093e\u0925 Dynamic Row Adding Logic \u092d\u0940 \u092c\u0924\u093e\u092f\u093e \u0939\u0948 \u091c\u093f\u0938\u092e\u0947 \u0915\u0940 jQuery \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0964 \u092b\u093f\u0930 JavaScript \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 Invoice Calculation \u0914\u0930 Sum \u0932\u0917\u093e\u0928\u0947 \u0938\u0947 Related Script \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947 \u092c\u0924\u093e\u092f\u093e \u0939\u0948\u0902 \u0964 \u0915\u0941\u0932 \u092e\u093f\u0932\u093e\u0915\u0930 \u0907\u0938 Article \u0938\u0947 \u0906\u092a \u092c\u0939\u0941\u0924 \u0939\u0940 \u0915\u092e Coding \u092e\u0947 \u090f\u0915 Invoice \u092c\u0928\u093e\u0928\u093e \u0938\u093f\u0916 \u091c\u093e\u090f\u0902\u0917\u0947 \u0964   <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Invoice Bootstrap Layout<\/h2>\n\n\n\n<p>HTML Code \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 Bootstrap Framework \u0915\u0940 \u0938\u0939\u093e\u092f\u0924\u093e \u0938\u0947 \u0915\u0941\u091b \u0907\u0938 \u0924\u0930\u0939 \u0938\u0947 Invoice format \u092c\u0928\u093e\u092f\u093e \u0917\u092f\u093e \u0939\u0948\u0902 , \u0907\u0938\u092e\u0947 Input Group, Table, Card \u0906\u0926\u093f Bootstrap Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0964   <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"338\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-15.png?resize=640%2C338&#038;ssl=1\" alt=\"bootstrap invoice with calculation\" class=\"wp-image-9694\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-15.png?resize=1024%2C541&amp;ssl=1 1024w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-15.png?resize=300%2C157&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-15.png?resize=768%2C406&amp;ssl=1 768w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-15.png?resize=220%2C115&amp;ssl=1 220w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-15.png?resize=140%2C73&amp;ssl=1 140w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-15.png?resize=60%2C31&amp;ssl=1 60w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-15.png?resize=150%2C79&amp;ssl=1 150w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-15.png?w=1130&amp;ssl=1 1130w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<p>\u0909\u092a\u0930\u094b\u0915\u094d\u0924 Format \u092e\u0947 detail \u092e\u0947 Invoice \u0915\u0947 calculation \u0932\u093f\u0916\u0947 \u0917\u090f \u0939\u0948\u0902 \u0964 \u0907\u0938\u0940 \u0932\u093f\u090f \u0907\u0938\u0947 Invoice with calculation \u0915\u0939\u093e \u0917\u092f\u093e \u0939\u0948\u0902 <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Invoice Bootstrap Print Format<\/h2>\n\n\n\n<p>\u090a\u092a\u0930\u094b\u0915\u094d\u0924 Invoice Format \u092e\u0947 \u0915\u0947\u0935\u0932 Border \u0915\u094b \u0939\u091f\u093e\u0915\u0930 \u0914\u0930 Background \u0906\u0926\u093f Colour \u0915\u094b \u0939\u091f\u093e\u0915\u0930 \u090f\u0915 Media Print \u092c\u0928\u093e\u0908 \u0939\u0948\u0902 \u091c\u093f\u0938\u0938\u0947 \u0915\u0940 \u0906\u092a Print Format \u092c\u0928\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"406\" height=\"331\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-16.png?resize=406%2C331&#038;ssl=1\" alt=\"\" class=\"wp-image-9695\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-16.png?w=406&amp;ssl=1 406w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-16.png?resize=300%2C245&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/image-16.png?resize=150%2C122&amp;ssl=1 150w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Content <\/h2>\n\n\n\n<p>\u0909\u092a\u0930\u094b\u0915\u094d\u0924 \u0926\u094b\u0928\u094b\u0902 \u0939\u0940 Format \u092c\u0928\u093e\u0928\u0947 \u092e\u0947 \u0935\u0948\u0938\u0947 \u0915\u094b \u090f\u0915 \u0939\u0940 File \u092e\u0947 Script \u0932\u093f\u0916 \u0915\u0930 \u0906\u092a \u092c\u0928\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902, \u0932\u0947\u0915\u093f\u0928 \u0906\u092a\u0915\u094b \u0905\u091a\u094d\u091b\u0947 \u0938\u0947 \u0938\u092e\u091d \u092e\u0947 \u0906\u090f \u0907\u0938\u0932\u093f\u090f \u092f\u0939\u093e \u092a\u0930 html, css \u0914\u0930 js \u0915\u0940 \u0905\u0932\u0917 &#8211; \u0905\u0932\u0917 File \u092c\u0928\u093e \u0926\u0940 \u0939\u0948\u0902    <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML (invoice.html)<\/li>\n\n\n\n<li>CSS (invoice.css)<\/li>\n\n\n\n<li>CSS For Print Format (invoiceprint.css)<\/li>\n\n\n\n<li>JS (invoice.js)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML <\/h2>\n\n\n\n<p>HTML \u092e\u0947 Bootstrap CDN \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0938\u093e\u0925 \u092e\u0947 jQuery CDN \u0915\u093e \u092d\u0940 \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948 \u091c\u093f\u0938\u0938\u0947 \u0915\u0940 \u0915\u092e Coding \u092e\u0947 Dynamic Add \u0914\u0930 Remove \u0915\u0930 \u0915\u093e\u0930\u094d\u092f \u0915\u093f\u092f\u093e \u091c\u093e \u0938\u0915\u0947 \u0964 <\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre title=\"invoice.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n    &lt;title&gt;Imagination Invoice Example&lt;\/title&gt;\n    &lt;!-- For Bootstrap--&gt;\n    &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65\" crossorigin=\"anonymous\"&gt;\n    \n    &lt;!-- CSS For Print Format --&gt;\n    &lt;link rel=\"stylesheet\" media=\"print\" href=\"invoiceprint.css\"&gt;\n    \n    &lt;!-- CSS For Invoice --&gt;\n    &lt;link rel=\"stylesheet\"  href=\"invoice.css\"&gt;\n\n    &lt;!-- jQuery CDN --&gt;\n    &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.2.slim.js\" integrity=\"sha256-OflJKW8Z8amEUuCaflBZJ4GOg4+JnNh9JdVfoV+6biw=\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    \n    &lt;!-- For Invoice  --&gt;\n    &lt;script src=\"invoice.js\"&gt;&lt;\/script&gt;\n\n\n&lt;\/head&gt;\n  &lt;body&gt;\n    \n\n    &lt;div class=\"container \"&gt;\n       \n\n        &lt;div class=\"card\"&gt;\n            &lt;div class=\"card-header text-center\"&gt;\n              &lt;h4&gt;INVOICE&lt;\/h4&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"card-body\"&gt;\n\n                &lt;div class=\"row\"&gt;\n                    &lt;div class=\"col-8\"&gt;\n                        &lt;div class=\"input-group mb-3\"&gt;\n                            &lt;span class=\"input-group-text\" &gt;Customer&lt;\/span&gt;\n                            &lt;input type=\"text\" class=\"form-control\" placeholder=\"Customer\"  &gt;\n                        &lt;\/div&gt;\n            \n                        &lt;div class=\"input-group mb-3\"&gt;\n                            &lt;span class=\"input-group-text\" &gt;Address&lt;\/span&gt;\n                            &lt;input type=\"text\" class=\"form-control\" placeholder=\"Address\"  &gt;\n                        &lt;\/div&gt;\n            \n                        &lt;div class=\"input-group mb-3\"&gt;\n                            &lt;span class=\"input-group-text\" &gt;City&lt;\/span&gt;\n                            &lt;input type=\"text\" class=\"form-control\" placeholder=\"City\"  &gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                    &lt;div class=\"col-4\"&gt;\n                      \n                        &lt;div class=\"input-group mb-3\"&gt;\n                            &lt;span class=\"input-group-text\" &gt;Inv. No&lt;\/span&gt;\n                            &lt;input type=\"text\" class=\"form-control\" placeholder=\"Inv. No\"  &gt;\n                        &lt;\/div&gt;\n\n                        &lt;div class=\"input-group mb-3\"&gt;\n                            &lt;span class=\"input-group-text\" &gt;Inv. Date&lt;\/span&gt;\n                            &lt;input type=\"date\" class=\"form-control\" placeholder=\"Inv. Date\"  &gt;\n                        &lt;\/div&gt;\n\n\n\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n\n\n                &lt;table class=\"table table-bordered\"&gt;\n                    &lt;thead class=\"table-success\"&gt;\n                      &lt;tr&gt;\n                        &lt;th scope=\"col\"&gt;#&lt;\/th&gt;\n                        &lt;th scope=\"col\"&gt;Particular&lt;\/th&gt;\n                        &lt;th scope=\"col\" class=\"text-end\"&gt;Qty&lt;\/th&gt;\n                        &lt;th scope=\"col\" class=\"text-end\"&gt;Rate&lt;\/th&gt;\n                        &lt;th scope=\"col\" class=\"text-end\"&gt;Amount&lt;\/th&gt;\n                        &lt;th scope=\"col\" class=\"NoPrint\"&gt;                         \n                            &lt;button type=\"button\" class=\"btn btn-sm btn-success\" onclick=\"BtnAdd()\"&gt;+&lt;\/button&gt;\n                          \n                        &lt;\/th&gt;\n\n                      &lt;\/tr&gt;\n                    &lt;\/thead&gt;\n                    &lt;tbody id=\"TBody\"&gt;\n                      &lt;tr id=\"TRow\" class=\"d-none\"&gt;\n                        &lt;th scope=\"row\"&gt;1&lt;\/th&gt;\n                        &lt;td&gt;&lt;input type=\"text\" class=\"form-control\" &gt;&lt;\/td&gt;\n                        &lt;td&gt;&lt;input type=\"number\" class=\"form-control text-end\" name=\"qty\" onchange=\"Calc(this);\"&gt;&lt;\/td&gt;\n                        &lt;td&gt;&lt;input type=\"number\" class=\"form-control text-end\" name=\"rate\"  onchange=\"Calc(this);\"&gt;&lt;\/td&gt;\n                        &lt;td&gt;&lt;input type=\"number\" class=\"form-control text-end\" name=\"amt\" value=\"0\" disabled=\"\"&gt;&lt;\/td&gt;\n                        &lt;td class=\"NoPrint\"&gt;&lt;button type=\"button\" class=\"btn btn-sm btn-danger\" onclick=\"BtnDel(this)\"&gt;X&lt;\/button&gt;&lt;\/td&gt;\n                      &lt;\/tr&gt;\n                    &lt;\/tbody&gt;\n                  &lt;\/table&gt;\n\n\n                  &lt;div class=\"row\"&gt;\n                    &lt;div class=\"col-8\"&gt;\n                      \n                        &lt;button type=\"button\" class=\"btn btn-primary\" onclick=\"GetPrint()\"&gt;Print&lt;\/button&gt;\n\n                    &lt;\/div&gt;\n                    &lt;div class=\"col-4\"&gt;\n                        &lt;div class=\"input-group mb-3\"&gt;\n                            &lt;span class=\"input-group-text\" &gt;Total&lt;\/span&gt;\n                            &lt;input type=\"number\" class=\"form-control text-end\" id=\"FTotal\" name=\"FTotal\" disabled=\"\"&gt;\n                        &lt;\/div&gt;\n                        &lt;div class=\"input-group mb-3\"&gt;\n                            &lt;span class=\"input-group-text\" &gt;GST&lt;\/span&gt;\n                            &lt;input type=\"number\" class=\"form-control text-end\" id=\"FGST\" name=\"FGST\" onchange=\"GetTotal()\"&gt;\n                        &lt;\/div&gt;\n                        &lt;div class=\"input-group mb-3\"&gt;\n                            &lt;span class=\"input-group-text\" &gt;Net Amt&lt;\/span&gt;\n                            &lt;input type=\"number\" class=\"form-control text-end\" id=\"FNet\" name=\"FNet\" disabled=\"\"&gt;\n                        &lt;\/div&gt;\n\n\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n             &lt;\/div&gt;\n          &lt;\/div&gt;\n\n    &lt;\/div&gt;\n\n\n\n    &lt;!-- Bootstrap Bundle JS --&gt;\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK\/7HAuoJl+0I4\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/EpfjKN4lVoU\" target=\"_blank\" rel=\"noopener\">Related Video : HTML &amp; Bootstrap Invoice Format <\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS <\/h2>\n\n\n\n<p>Bootstrap \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u0947 \u0938\u0947 \u0939\u092e\u090f CSS \u0932\u0917\u093e\u0928\u0947 \u0915\u0940 \u0906\u0935\u0936\u094d\u092f\u0915\u0924\u093e \u0939\u0940 \u0928\u0939\u0940\u0902 \u0939\u0941\u0908 , \u092b\u093f\u0930 \u092d\u0940 \u0939\u092e\u0928\u0947 \u091c\u094b input Group \u0932\u093f\u090f \u0925\u0947 \u0909\u0928\u0915\u0940 \u090f\u0915 \u091c\u0948\u0938\u0940 Width \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0939\u092e\u0928\u0947 CSS \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 , \u0906\u092a \u091a\u093e\u0939\u0947 \u0939\u094b \u0907\u0938\u0947 \u0905\u0932\u0917 \u0938\u0947 File \u0928 \u092c\u0928\u093e \u0915\u0930 HTML File \u092e\u0947 \u0939\u0940 \u0932\u093f\u0916 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre title=\"invoice.css\" class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.input-group-text {\n   width: 85px;\n}       <\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS For Print Format<\/h2>\n\n\n\n<p>Print Format \u092e\u0947 \u0939\u092e\u0947 Border Remove \u0915\u0930\u0928\u093e \u0939\u094b\u0924\u0940 \u0914\u0930 \u0914\u0930 \u0938\u093e\u0925 \u092e\u0947 background colour \u0906\u0926\u093f \u092d\u0940 \u092c\u0926\u0932\u0928\u093e \u0939\u094b\u0924\u093e \u0939\u0948\u0902 \u0964 \u0909\u0938\u0915\u0947 \u0932\u093f\u090f \u0939\u092e\u0928\u0947 Specific CSS \u0932\u093f\u0916\u0940 \u0939\u0948\u0902 \u0964 \u092f\u0939 CSS \u092b\u093e\u0907\u0932 \u0915\u0947\u0935\u0932 Print \u0915\u0947 \u0938\u092e\u092f \u0939\u0940 Applicable \u0939\u094b\u0924\u0940 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre title=\"invoiceprint.css\" class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">\n.btn , .NoPrint \n{\n    display: none;\n}\n\n.form-control\n{\n    border: 0px;\n}\n\n.input-group-text\n{\n    border: 0px;\n    background-color: white;\n}\n\ntable \n{\n    border : 1px solid black;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">JS (Invoice with Calculation) <\/h2>\n\n\n\n<p>\u0907\u0938 JS \u092b\u093e\u0907\u0932 \u092e\u0947 \u091c\u093f\u0924\u0928\u0940 \u092d\u0940 \u0939\u092e\u0928\u0947 Logic \u0932\u0917\u093e\u090f \u0939\u0948\u0902 \u0938\u092d\u0940 \u0915\u0947 \u0905\u0932\u0917 \u0905\u0932\u0917 function \u092c\u0928\u093e\u090f \u0939\u0948 \u0914\u0930 \u0909\u0928\u0915\u0947 HTML \u0938\u0947 call \u0915\u093f\u090f \u0939\u0948\u0902 \u0914\u0930 \u090f\u0915 Function \u0938\u0947 \u0926\u0942\u0938\u0930\u0947 Function \u0915\u094b \u092d\u0940 Call \u0915\u093f\u092f\u093e \u0917\u092f\u093e \u0939\u0948\u0902 \u0964 \u0907\u0938\u092e\u0947 \u0928\u093f\u092e\u094d\u0928 function \u0939\u0948\u0902 <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Invoice \u0915\u094b Print \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f <\/li>\n\n\n\n<li>Invoice \u092e\u0947 rows Add \/ Insert \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f <\/li>\n\n\n\n<li>\u092a\u0939\u0932\u0947 \u0938\u0947 Add \u0915\u0940 \u0939\u0941\u0908 Rows \u0915\u094b Delete \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f <\/li>\n\n\n\n<li>Detail Rows \u0915\u0947 Calculation \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u091c\u0948\u0938\u0947 Amt = Qty * Rate <\/li>\n\n\n\n<li>Amount \u0915\u093e total Calculation \u0915\u0930\u0928\u0947 \u0914\u0930 \u0909\u0938\u0947 Footer \u092a\u0930 Set \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f <\/li>\n\n\n\n<li>\u0914\u0930 \u0938\u093e\u0925 \u092e\u0947 footer \u092e\u0947 \u0905\u0932\u0917 \u0938\u0947 GST \u092f\u093e \u0905\u0928\u094d\u092f \u0915\u094b\u0908 \u092d\u0940 TAX \u091c\u094b\u095c\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f <\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/HwvM98ItwJo\" target=\"_blank\" rel=\"noopener\">Related Video : Dynamic Add &amp; Delete Button Using jQuery in Invoice<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/EpfjKN4lVoU\" target=\"_blank\" rel=\"noopener\">Related Video : How to Calculate Invoice Amount (Qty * Rate) &amp; Total using JS<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\nfunction GetPrint()\n{\n    \/*For Print*\/\n    window.print();\n}\n\nfunction BtnAdd()\n{\n    \/*Add Button*\/\n    var v = $(\"#TRow\").clone().appendTo(\"#TBody\") ;\n    $(v).find(\"input\").val('');\n    $(v).removeClass(\"d-none\");\n    $(v).find(\"th\").first().html($('#TBody tr').length - 1);\n}\n\nfunction BtnDel(v)\n{\n    \/*Delete Button*\/\n       $(v).parent().parent().remove(); \n       GetTotal();\n\n        $(\"#TBody\").find(\"tr\").each(\r\n        function(index)\r\n        {\r\n           $(this).find(\"th\").first().html(index);\r\n        }\r\n\r\n       );\n}\n\nfunction Calc(v)\n{\n    \/*Detail Calculation Each Row*\/\n    var index = $(v).parent().parent().index();\n    \n    var qty = document.getElementsByName(\"qty\")[index].value;\n    var rate = document.getElementsByName(\"rate\")[index].value;\n\n    var amt = qty * rate;\n    document.getElementsByName(\"amt\")[index].value = amt;\n\n    GetTotal();\n}\n\nfunction GetTotal()\n{\n    \/*Footer Calculation*\/   \n\n    var sum=0;\n    var amts =  document.getElementsByName(\"amt\");\n\n    for (let index = 0; index &lt; amts.length; index++)\n    {\n        var amt = amts[index].value;\n        sum = +(sum) +  +(amt) ; \n    }\n\n    document.getElementById(\"FTotal\").value = sum;\n\n    var gst =  document.getElementById(\"FGST\").value;\n    var net = +(sum) + +(gst);\n    document.getElementById(\"FNet\").value = net;\n\n}\n<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/selfimagination.in\/tips\/mysql-library-management-system\/\">MySQL \u092e\u0947 Library Management System \u092c\u0928\u093e\u0928\u093e \u0938\u0940\u0916\u0947<\/a><\/p>\n\n\n\n<p>\u0907\u0924\u0928\u093e \u0915\u0930\u0928\u0947 \u0915\u0947 \u092c\u093e\u0926 \u0906\u092a invoice html \u0915\u093e browser \u092a\u0930 Preview \u0926\u0947\u0916\u0947 , \u0910\u0921 Button \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 Row \u091c\u094b\u095c\u0947 \u0914\u0930 \u0938\u093e\u0925 \u092e\u0947 \u092f\u0926\u093f \u0915\u0941\u091b \u0917\u0932\u0924\u0940 \u0939\u094b \u091c\u093e\u090f \u0924\u094b Delete Button \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0909\u0938\u0947 Remove \u0915\u0930 \u0926\u0947\u0935\u0947\u0964 \u091c\u093f\u0924\u0928\u0940 \u092d\u0940 Filed \u0939\u0948\u0902 \u0909\u0938\u0915\u0947 Value Fill \u0915\u0930\u0947 \u0914\u0930 \u0905\u0902\u0924 \u092e\u0947 Print \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 Invoice \u0915\u093e Format Print \u0928\u093f\u0915\u093e\u0932\u0947 \u0964 <\/p>\n\n\n\n<p>\u0906\u0936\u093e \u0939\u0948\u0902 \u092e\u0941\u091d\u0947 \u0915\u0940 \u0906\u092a\u0915\u094b \u092f\u0939 Bootstrap Invoice with Calculation \u092c\u0939\u0941\u0924 \u0939\u0940 \u0905\u091a\u094d\u091b\u0947 \u0938\u0947 \u0938\u092e\u091d \u092e\u0947 \u0906 \u0917\u092f\u093e \u0939\u094b\u0917\u093e \u0964 \u092b\u093f\u0930 \u092d\u0940 \u092f\u0926\u093f \u0906\u092a\u0915\u094b \u0915\u094b\u0908 \u092d\u0940 Doubt \u0939\u094b \u0924\u094b \u0906\u092a \u092e\u0941\u091d\u0947 \u0928\u093f\u0938\u0902\u0915\u094b\u091a Comment \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<p>\u092f\u0939 Article Invoice with Calculation \u0915\u0948\u0938\u093e \u0932\u0917\u093e \u092c\u0924\u093e\u0928\u093e \u0928 \u092d\u0942\u0932\u0947 \u092e\u093f\u0932\u0924\u0947 \u0939\u0948\u0902 Next Article \u092e\u0947 Thanks for Reading \u0964 <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u0939\u092e\u093e\u0930\u0947 \u0905\u0928\u094d\u092f \u0906\u0930\u094d\u091f\u093f\u0915\u0932<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-function\/\">MySQL Function<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-stored-procedure\/\">MySQL Stored Procedure<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/get-post-method\/\">PHP Get \/Post Method \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/php-math-function\/\">PHP Math Function \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/learn-cpp-from-c\/\">C \u0938\u0947 C ++ \u0938\u0940\u0916\u0947 \u0938\u0930\u0932 \u0936\u092c\u094d\u0926\u094b\u0902 \u092e\u0947\u0902<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/php-variables\/\">PHP Variable \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/arduino-control-structure\/\">Arduino Control Structure<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/c-union\/\">Union in C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/c-pointer\/\">Declaration of Pointer in C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/search-jquery\/\">jQuery Search Filter<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-table-create-alter-drop\/\">MySQL Create Table | Alter Table | Drop Table<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/api-using-node-react-express-mysql\/\">API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/cpanel\/\">CPANEL In Hindi<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Invoice with calculation and format, how to make invoice, invoice js, invoice css, Complete Invoice Using HTML, Bootstrap, js , jQuery With Print Format, how to create invoice with calculation step by step. \u0907\u0938 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 (Invoice with Calculation) \u092e\u0947 \u0939\u092e\u0928\u0947 \u0906\u092a\u0915\u094b Bootstrap \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 Invoice \u092c\u0928\u093e\u0928\u093e \u092c\u0924\u093e\u092f\u093e \u0939\u0948 \u0964 \u0938\u093e\u0925 \u092e\u0947 \u0907\u0938 Article \u092e\u0947 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9753,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[14,13,12,4],"tags":[],"class_list":["post-9692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-html","category-javascript","category-jquery"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2022\/12\/invoice-with-calculation.jpg?fit=1200%2C628&ssl=1","_links":{"self":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/9692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/comments?post=9692"}],"version-history":[{"count":60,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/9692\/revisions"}],"predecessor-version":[{"id":10832,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/9692\/revisions\/10832"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media\/9753"}],"wp:attachment":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media?parent=9692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/categories?post=9692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/tags?post=9692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}