Can't Figure out how to Sum The Quantity

silentdog
New Member
Join Date: Mar 2022
Posts: 2
Can't Figure out how to Sum The Quantity

Mar 10 '22, 10:18 PM
Hello I have this Form Where i Am trying to Add up the Quantity of items.
Code:
<!DOCTYPE html>
<html dir="ltr" lang="en-GB">
<head><meta charset="UTF-8">
	<title>AETP Quotation</title>
	<!--CSS for the theme-->
	<style type="text/css">body {
	font-family:Sans-serif, "Helvetica", Verdana, sans-serif;
}

tr, td, th, thead, tfoot, span, p {
	page-break-inside: avoid !important;
}

/* The title of the page */
.page_title {
	text-decoration:underline;
	text-transform:capitalize;
	margin-top:0;
}
/* The logo contained */
.logo img {
	max-width:350px;
	max-height:150px;
	width:auto;
	height:auto;
}
/* The logo img element */
.img_logo {
	max-width:350px;
	max-height:150px;
	width:auto;
	height:auto;
}
/* The details about the invoice */
.invoice_details {
	font-size:0.9em;
}
/* The details about the purchase order */
.po_details {
	font-size:0.9em;
}
/* The rounded box for client and delivery details */
.details_box {
	padding-left:6px;
	border:0px solid #AAA;
	border-radius:3px;
	background-color:#e6e6e6;
	font-size:0.9em;
}
/* A label for a field */
.label {
	font-weight:bold;
	white-space: nowrap;
}
/* The grid we are using to show items */
.item_grid {
	border-radius:6px;
	margin-left: auto;
    margin-right: auto;
	counter-reset: row;
	empty-cells: hide;
}
/* The blank line between items and totals in the grid */
.item_grid_break {
	border-bottom:0px solid #777;
}
/* Set the left border on certain item cells */
.item_grid td, .item_grid th {
	padding:3px;
	border-top:0 solid #777;
	border-right:0px solid #777;
	border-bottom:0 solid #777;
	border-left:0px solid #777;
}
/* The header row in the item grid */
.item_grid th {
	background:#bc7100;
	border-top:0px solid #777;
}
/* Set the stripes in the item grid
.item_grid tr.item_row:nth-child(odd) {
	background-color:rgba(0,0,0, 0.05); */
}
/* Make sure last item has a bottom border
.item_grid tr:last-child td {
	border-bottom:0px solid #777;
}
*/
/* The grid we are using to show totals */
.totals_grid {
	margin-left: auto;
    margin-right: auto;
	counter-reset: row;
	empty-cells: show;
}

.totals_grid tr .totals_grid td {
    border-left:none;
    border-right:none;
}

/* The header row in the totals grid */
.totals_grid th {
	background:#e6e6e6;
	border-top:2px solid #d1d1d1;
    border-collapse:collapse;
    border-left:0px;
    border-right:0px;
}

/* Make sure last item has a bottom border */
.totals_grid tr:last-child td {
	border-bottom:2px solid #d1d1d1;
}

/* The row counter */
.counter:before {
	counter-increment: row;
    content: counter(row);
}
.counter {
	font-weight:normal;
	color:#999;
}

hr {
    height:2px;
    color:#d1d1d1;
    background:#d1d1d1;
    border:none;
    width:100%;
}

/* THE FOLLOWING ARE GENERATED CLASSES */

/* How a heading name will be displayed */
.heading_name {
	font-weight:bold;
	margin-top:4px;
	font-size:1.1em;
	white-space: nowrap;
}
/* How a heading technical description will be displayed */
.heading_technical {
	font-style:italic;
	color:grey;
}
/* How a heading total price will be displayed */
.heading_price {
	display:none;
	white-space:nowrap;
}
.consumable_price,.stock_price, .custom_price, .labour_price {
	white-space:nowrap;
}
/* How an inline heading will be displayed */
.inline_name {
	font-weight:bold;
	font-style:italic;
	white-space: nowrap;
}
/* How items quantity will be displayed */
.consumable_qty, .stock_qty, .custom_qty, .labour_qty {
	display:inline-block;
	width:70px;
}
/* How items name will be displayed */
.consumable_name, .stock_name, .custom_name, .labour_name {
	display: inline-block;
	white-space: nowrap;
}
.heading_name {
	display: block;
	white-space: nowrap;
}
/* How autopull items will be displayed */
.autopull.consumable_name, .autopull.stock_name, .autopull.custom_name, .autopull.labour_name, .autopull.stock_qty, .autopull.stock_price, .autopull.stock_discount, .autopull.stock_unit_price {
	font-style:italic;
	color:grey;
    font-size:0.8em;
}
/* How additional item text will be diaplyed */
.consumable_additional, .stock_additional, .custom_additional, .labour_additional {
	display: inline;
	font-style:italic;
	color:#777;
	white-space:normal;
}
.heading_additional {
	display:block;
	white-space:normal;
}
.stock_unit_price, .stock_price, .custom_unit_price, .custom_price, .consumable_unit_price, .consumable_price, .labour_unit_price, .labour_price {
	white-space: nowrap !important;
}
/* What to show when showing on screen */
@media screen {
	body {
		min-width:950px;
	}
	.pagebreak hr {
		border-top: 5px double #8c8b8b;
	}
}
@media print {
    html, body {
        width:950px; /* Sets the page to a nice width (same as used in MyHireHop webpage) */
		-webkit-print-color-adjust:exact;
		color-adjust:exact;
    }
	.pagebreak {
		display: none !important;
		border-top: 5px double #8c8b8b;
	}
}
.text_right { text-align: right; }
.text_left { text-align: left; }
	</style>
	<script>
		// Change the document name and add the invoice number once the document has finished loading
		window.onload = function(){
			document.title = document.getElementById("doc_type").textContent + " (" + document.getElementById("number").textContent + ")";
		}
	</script>
</head>
<body><!--Make the whole page a table so the <thead> acts as the header-->
<table align="center" style="width:100%;"><!--This is our page header section-->
	<thead>
		<tr>
			<td colspan="1" rowspan="2">
			<h1 class="page title" id="doc_type"><span style="color:#666666;"><span style="font-size:48px;">Quotation</span></span></h1>

			<p><span style="color:#666666;"><strong><span name="job:company">{{job.company}}</span></strong><span name="job:address" style="display:block;overflow:auto">{{job.address}}</span><span name="job:telephone" style="display:block;overflow:auto">{{job.telephone}}</span></span></p>
			</td>
			<td><span style="color:#666666;"><img class="img_logo" name="user:logo_url" src="/images/logo.jpg" style="float: right;" /></span></td>
		</tr>
		<tr>
			<td>
			<p name="depot:address" style="text-align: right;"><span name="depot:address" style="color:#666666;"><span name="user:company" style="font-weight:bold">{{user.company}}</span><br />
			{{depot.address}}</span></p>
			</td>
		</tr>
		<tr>
			<td colspan="2">
			<table cellpadding="0" cellspacing="0" width="100%">
				<tbody>
					<tr>
						<td class="text_right" style="font-size: 1.2em; text-align: left;" valign="bottom"><span style="color:#666666;"><span name="job:job_name">{{job.job_name}}</span></span></td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</thead>
	<!--The <tbody> is the rest of the page-->
	<tbody>
		<tr>
			<td colspan="2">
			<table cellpadding="0" cellspacing="0" width="100%">
				<tbody>
					<tr>
						<td class="details_box" valign="top" width="50%">
						<table width="100%">
							<tbody>
								<tr>
									<td class="label" style="min-width:95px;width:95px"><span style="color:#666666;">Quotation</span></td>
									<td><span style="color:#666666;">JR - <span id="number" name="job:reference">{{job.reference}}</span></span></td>
								</tr>
								<tr>
									<td class="label"><span style="color:#666666;">Date</span></td>
									<td><span style="color:#666666;"><span name="general:date">{{general.date}}</span></span></td>
								</tr>
								<tr>
									<td class="label" valign="top"><span style="color:#666666;">Valid Until</span></td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td class="label" valign="top"><span style="color:#666666;">Your Reference&nbsp; &nbsp;&nbsp;</span></td>
									<td><span style="color:#666666;"><span name="job:client_ref" style="display:block;overflow:auto">{{job.client_ref}}&nbsp;</span></span></td>
								</tr>
								<tr>
									<td class="label" valign="top"><span style="color:#666666;">Job Manager&nbsp;&nbsp;</span></td>
									<td><span name="job:user" style="color:#666666;">{{job.user}}</span></td>
								</tr>
								<tr>
									<td class="label" valign="top"><font color="#666666">Job Type</font></td>
									<td><span name="job:job_type" style="color:#666666;">{{job.job_type}}</span></td>
								</tr>
							</tbody>
						</table>
						</td>
						<td><span style="color:#666666;">&nbsp;&nbsp;</span></td>
						<td class="details_box" valign="top" width="50%">
						<table width="100%">
							<tbody>
								<tr>
									<td class="label" style="min-width:165px;width:165px"><span style="color:#666666;">Deliver to</span></td>
									<td><span style="color:#666666;"><span name="job:venue">{{job.venue}}</span></span></td>
								</tr>
								<tr>
									<td class="label" valign="top"><span style="color:#666666;">Delivery Address</span></td>
									<td><span style="color:#666666;"><span name="job:venue_address" style="display:block;overflow:auto">{{job.venue_address}}</span></span></td>
								</tr>
								<tr>
									<td class="label"><span style="color:#666666;">Telephone</span></td>
									<td><span style="color:#666666;"><span name="job:venue_telephone">{{job.venue_telephone}}</span></span></td>
								</tr>
								<tr>
									<td class="label"><font color="#666666">Delivery</font></td>
									<td name="job:deliver"><span style="color:#666666;"><span name="job:deliver">{{job.deliver}}</span></span></td>
								</tr>
								<tr>
									<td class="label"><font color="#666666">Collection</font></td>
									<td name="job:collect"><span style="color:#666666;"><span name="job:collect">{{job.collect}}</span></span></td>
								</tr>
							</tbody>
						</table>
						</td>
					</tr>
				</tbody>
			</table>
			<span style="color:#666666;"><!--Job dates--></span>

			<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
				<tbody>
					<tr>
						<td>
						<table border="0" cellpadding="5" cellspacing="0" style="width:100%;">
							<tbody>
								<tr>
									<td><font color="#666666"><span style="white-space: nowrap;"><b>Outgoing</b></span></font></td>
									<td><span style="color:#666666;"><span name="job:out_date">{{job.out_date}}</span> - <span name="job:out_time">{{job.out_time}}</span></span></td>
								</tr>
								<tr>
									<td><span style="color:#666666;"><span class="label">Job Start</span></span></td>
									<td><span style="color:#666666;"><span name="job:job_start">{{job.job_start}}</span> - <span name="job:job_start_time">{{job.job_start_time}}</span></span></td>
								</tr>
								<tr>
									<td><span style="color:#666666;"><span class="label">Job Finish</span></span></td>
									<td><span style="color:#666666;"><span name="job:job_end">{{job.job_end}}</span> - <span name="job:job_end_time">{{job.job_end_time}}</span></span></td>
								</tr>
								<tr>
									<td><span style="color:#666666;"><span class="label">Returning</span></span></td>
									<td><span style="color:#666666;"><span name="job:return_date">{{job.return_date}}</span> - <span name="job:return_time">{{job.return_time}}</span></span></td>
								</tr>
							</tbody>
						</table>
						</td>
						<td style="width: 50%; text-align: left; vertical-align: top;" width:100="">
						<table border="0" cellpadding="5" cellspacing="0" style="width:100%;">
							<tbody>
								<tr>
									<td><font color="#666666"><span style="white-space: nowrap;"><b>Job Notes</b></span></font></td>
								</tr>
								<tr>
									<td><span style="color:#666666;"><span name="job:details">{{job.details}}</span></span></td>
								</tr>
							</tbody>
						</table>
						</td>
					</tr>
				</tbody>
			</table>

			<div align="center" style="width: 100%; align:center">
			<table align="center" cellpadding="6" cellspacing="0" class="item_grid" style="table-layout:fixed;width:100%;">
				<thead>
					<tr>
						<th class="item_grid_break" style="width:100%;"><span style="color:#666666;"><span style="color:#FFFFFF;">Description</span></span></th>
						<th class="item_grid_break" style="min-width:50px;width:50px;"><span style="color:#666666;"><span style="color:#FFFFFF;">Qty.</span></span></th>
						<th class="item_grid_break" style="min-width:80px;width:80px;"><span style="color:#666666;"><span style="color:#FFFFFF;">Unit Price</span></span></th>
						<th class="item_grid_break" style="min-width:70px;width:80px;"><span style="color:#666666;"><span style="color:#FFFFFF;">Discount</span></span></th>
						<th class="item_grid_break" style="min-width:95px;width:95px;"><span style="color:#666666;"><span style="color:#FFFFFF;">Price</span></span></th>
					</tr>
				</thead>
				<tbody>
					<tr class="item_row" name="items:">
						<td class="indent"><span style="color:#666666;"><span name="items:name">{{items.name}}</span> <span name="items:additional">{{items.additional}}</span></span></td>
						<td align="center"><span style="color:#666666;"><span name="items:qty">{{items.qty}}</span></span></td>
						<td style="text-align:right;"><span style="color:#666666;"><span name="items:unit_price">{{items.unit_price}}</span></span></td>
						<td style="text-align:right;"><span style="color:#666666;"><span name="items:discount">{{items.discount}}</span></span></td>
						<td style="text-align:right;"><span style="color:#666666;"><span name="items:price">{{items.price}}</span></span></td>
					</tr>
				</tbody>
			</table>
			</div>

			<hr /></div>

			<iv align="center" style="width: 100%; align:center">
			<table align="center" cellpadding="8" cellspacing="0" class="totals_grid" width="100%">
				<tbody>
					<tr>
						<td style="text-align: center;"><strong><span style="color:#666666;"><span name="totals:value">{{totals.weight}}</span></span></strong></td>
						<td style="text-align: center;"><strong><span style="color:#666666;"><span name="total:qty"><span id="sum">0</span>
	<script>
	$(document).ready(function(){
		$({{items.qty}}).each(function() {

			$(this).keyup(function(){
				calculateSum();
			});
		});

	});

	function calculateSum() {

		var sum = 0;
		$({{items.qty}}).each(function() {

			if(!isNaN(this.value) && this.value.length!=0) {
				sum += parseFloat(this.value);
			}

		});
		$("#sum").html(sum.toFixed(0));
	}
</script></span></span></strong></td>
						<td style="text-align: center;"><strong><span style="color:#666666;"><span name="totals:weight">{{totals.value}}</span></span></strong></td>

					</tr>
				</tbody>
				<thead class="totals_grid">
					<tr>
						<th scope="col" style="text-align: center;" width="25%"><span style="color:#666666;"><span class="label">Total Weight</span></span></th>
						<th scope="col" style="text-align: center;" width="25%"><span style="color:#666666;"><span class="label">Total Items</span></span></th>
						<th scope="col" style="text-align: center;" width="25%"><span style="color:#666666;"><span class="label">Replacement Value</span></span></th>
					</tr>
				</thead>
			</table>
			</div>


			<div>
			<hr />
			<table align="center" border="0" cellpadding="10" cellspacing="0" style="width:100%">
				<tbody>
					<tr>
						<td width="22.5%"><span style="color:#666666;"><strong>Rental Charges</strong></span></td>
						<td style="text-align: right;" width="22.5%"><span style="color:#666666;"><strong><span name="totals:net" width="25%">{{totals.net}}</span></strong></span></td>
						<td style="text-align: right;" width="10%">&nbsp;</td>
						<td width="22.5%"><span style="color:#666666;"><strong>Total</strong></span></td>
						<td style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:net" width="22.5%">{{totals.net}}</span></strong></span></td>
					</tr>
					<tr>
						<td><span style="color:#666666;"><strong>Sale Charges</strong></span></td>
						<td style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:net" width="25%">{{totals.net}}</span></strong></span></td>
						<td style="text-align: right;">&nbsp;</td>
						<td><span style="color:#666666;"><strong>Discount</strong></span></td>
						<td name="totals:discount" style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:discount">{{totals.discount}}</span></strong></span></td>
					</tr>
					<tr>
						<td><span style="color:#666666;"><strong>Service Charges</strong></span></td>
						<td style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:net" width="25%">{{totals.net}}</span></strong></span></td>
						<td style="text-align: right;">&nbsp;</td>
						<td><span style="color:#666666;"><strong>VAT</strong></span></td>
						<td style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:vat">{{totals.vat}}</span></strong></span></td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td style="text-align: right;">&nbsp;</td>
						<td style="text-align: right;">&nbsp;</td>
						<td><span style="color:#666666;"><strong>Total inc VAT</strong></span></td>
						<td style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:total">{{totals.total}}</span></strong></span></td>
					</tr>
				</tbody>
			</table>

			<div>
			<table align="center" cellpadding="5" cellspacing="0" class="totals_grid" width="100%">
				<tbody>
					<tr>
						<td style="text-align: center;">&nbsp;</td>
					</tr>
				</tbody>
			</table>
			</div>
			</td>
		</tr>
	</tbody>
</table>
<!--End of the page table--><!--</div>--></body>
</html>
At the Moment when I open the Form i just get either Blank or 0.

Any Help Would be greatly appreciated
Tags: None
Dormilich

Recognized Expert Expert

Join Date: Aug 2008

Posts: 8694
#2

Mar 11 '22, 09:49 AM

At the Moment when I open the Form i just get either Blank or 0.

First, there is no form.

Second, this may be the usual issue with callbacks* (you could check that by setting breakpoints in the dev tools).

One fix for that were to use Array.reduce(). I.e. var sum = $(...).map(...) .get().reduce(. ..) (step 1: convert elements into a number, step 2: convert it into an array, step 3: aggregate values into a sum).

* - when executed asynchronously, the code lines may be executed in a different order than written.
Comment
silentdog

New Member

Join Date: Mar 2022

Posts: 2
#3

Mar 21 '22, 10:06 AM

Sorry Forgive me My Javacript Knowledge is pretty basic.

Could you elaborate this for me ?
Comment
Dormilich

Recognized Expert Expert

Join Date: Aug 2008

Posts: 8694
#4

Mar 21 '22, 12:07 PM

My Java Knowledge is pretty basic

Mine is non-existent.

JavaScript is a different matter though.

Could you elaborate this for me ?

What part exactly?
Comment
Previous template Next
Can't Figure out how to Sum The Quantity

Can't Figure out how to Sum The Quantity

Comment

Comment

Comment
