/    Sign up×
Community /Pin to ProfileBookmark

Calculating values in the selected row

Copy linkTweet thisAlerts:
Feb 05.2020

Hello,
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-02-05/1580892464-83894-aaaaaa.png]
I want to calculate the selected row(s)
Can you help me?
Thank you from now

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@NachfolgerFeb 05.2020 — Provide the HTML, otherwise you're only gonna get a demo example.

This is only simple math. Multiply **Piece**x**Unit Price**, then apply the 25% discount (**Pre-discount**x**0.25**), add all of the rows up and follow the same procedure for the totals.
Copy linkTweet thisAlerts:
@gecekuleauthorFeb 06.2020 — &lt;table border="1" width="22%"&gt;<br/>
&lt;tr&gt;<br/>
&lt;td width="92"&gt;Select All:&lt;input type="checkbox"&gt;&lt;/td&gt;<br/>
&lt;td width="52"&gt;Piece&lt;/td&gt;<br/>
&lt;td width="66"&gt;Unit Price&lt;/td&gt;<br/>
&lt;td width="83"&gt;Disconunt %&lt;/td&gt;<br/>
&lt;td&gt;Total Amount&lt;/td&gt;<br/>
&lt;/tr&gt;<br/>
&lt;tr&gt;<br/>
&lt;td width="92"&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;<br/>
&lt;td width="52"&gt;10&lt;/td&gt;<br/>
&lt;td width="66"&gt;2&lt;/td&gt;<br/>
&lt;td width="83"&gt;25&lt;/td&gt;<br/>
&lt;td&gt;?&lt;/td&gt;<br/>
&lt;/tr&gt;<br/>
&lt;tr&gt;<br/>
&lt;td width="92"&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;<br/>
&lt;td width="52"&gt;8&lt;/td&gt;<br/>
&lt;td width="66"&gt;3&lt;/td&gt;<br/>
&lt;td width="83"&gt;&amp;nbsp;&lt;/td&gt;<br/>
&lt;td&gt;?&lt;/td&gt;<br/>
&lt;/tr&gt;<br/>
&lt;tr&gt;<br/>
&lt;td width="92"&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;<br/>
&lt;td width="52"&gt;5&lt;/td&gt;<br/>
&lt;td width="66"&gt;6&lt;/td&gt;<br/>
&lt;td width="83"&gt;25&lt;/td&gt;<br/>
&lt;td&gt;?&lt;/td&gt;<br/>
&lt;/tr&gt;<br/>
&lt;tr&gt;<br/>
&lt;td width="293" colspan="4"&gt;<br/>
&lt;p align="right"&gt;Grand total:&lt;/td&gt;<br/>
&lt;td&gt;???&lt;/td&gt;<br/>
&lt;/tr&gt;<br/>
&lt;tr&gt;<br/>
&lt;td width="293" colspan="4"&gt;<br/>
&lt;p align="right"&gt;+ Discount 5 %&lt;/td&gt;<br/>
&lt;td&gt;&amp;nbsp;&lt;/td&gt;<br/>
&lt;/tr&gt;<br/>
&lt;tr&gt;<br/>
&lt;td width="293" colspan="4"&gt;<br/>
&lt;p align="right"&gt;Value-added tax: 18%&lt;/td&gt;<br/>
&lt;td&gt;?&lt;/td&gt;<br/>
&lt;/tr&gt;<br/>
&lt;tr&gt;<br/>
&lt;td width="293" colspan="4"&gt;<br/>
&lt;p align="right"&gt;All Total Amunt:&lt;/td&gt;<br/>
&lt;td&gt;?????&lt;/td&gt;<br/>
&lt;/tr&gt;<br/>
&lt;/table&gt;

How to get the values "piece, unit price, discount" in the selected row?
Copy linkTweet thisAlerts:
@NachfolgerFeb 07.2020 — @gecekule#1614349

Although we could use querySelector's to reach the element, are these values calculated dynamically? I would recommend adding a data-attribute to each calculable column so that we can use JavaScript more effectively.

Eg:
``<i>
</i>&lt;tr&gt;
&lt;td width="92"&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
&lt;td width="52" data-count="1"&gt;5&lt;/td&gt;
&lt;td width="66" data-price="1"&gt;6&lt;/td&gt;
&lt;td width="83" data-discount="1"&gt;25&lt;/td&gt;
&lt;td data-total="1"&gt;?&lt;/td&gt;
&lt;/tr&gt;<i>
</i>`</CODE>
This is a poor design, but it works. We can then use something like this:
<CODE>`<i>
</i>document.querySelectorAll('tr').forEach(function(tr) {
// Variables
let count = tr.querySelector('[data-count]');
let price = tr.querySelector('[data-price]');
let discount = tr.querySelector('[data-discount]');

// Checks
if (!count || !price) { return false }

console.log("Here is the row value:", ((parseInt(count) * parseFloat(price).toFixed(3)) * (discount*0.01)));
});<i>
</i>`</CODE>
This is just a demo, but it should be close to what you need. Assuming you add a way to reference the different values (<C>data-price`, etc)
Copy linkTweet thisAlerts:
@gecekuleauthorFeb 08.2020 — Yes, I have a calculation with PHP

I can assign the calculated value of each row to a selector

Selected row, shown in the Total amount in the row and Grand total => + Discount => VAT => All Total Amount
Copy linkTweet thisAlerts:
@NachfolgerFeb 08.2020 — @gecekule#1614417

Wait a minute, why are you wanting to perform this calculation with JavaScript? PHP already has the data in _it's hands_, why not just let it do extremely simple tasks like this?

I think something is getting lost in translation here.
Copy linkTweet thisAlerts:
@gecekuleauthorFeb 10.2020 — I create a list of products with a form and wizards, all calculations are done. No problem here.

My question is from now on:

From this product list created, I want to send the selected products to another place. Again, no problem here

Just to inform the user on the live page, I want to show the total price of the selected products
Copy linkTweet thisAlerts:
@gecekuleauthorApr 25.2020 — Hello again,

My brother passed away so I had to take a break.

The customer selects the products she wants to order and places the order.

I want the customer to see the money amount of the products they choose.

NOTE: I can calculate with php, but when all products are loaded

Not all products,

I want the products selected from the list to be calculated online

``<i>
</i> &lt;table border="1" width="100%"&gt;
&lt;tr valign="top" align="center"&gt;
&lt;td class="thead"&gt;SELECT&lt;/td&gt;
&lt;td class="thead"&gt;PRODUCT CODE&lt;/td&gt;
&lt;td class="thead"&gt;BRAND&lt;/td&gt;
&lt;td class="thead"&gt;PRODUCT NAME&lt;/td&gt;
&lt;td class="thead"&gt;AMOUNT&lt;/td&gt;
&lt;td class="thead"&gt;UNIT PRICE&lt;/td&gt;
&lt;td class="thead"&gt;DISCOUNT %&lt;/td&gt;
&lt;td class="thead"&gt;TOTAL MONEY&lt;/td&gt;
&lt;/tr&gt;

&lt;tbody id="tbody_bbactive"&gt;
&lt;tr valign="top"&gt;
&lt;td class="alt1"&gt;&lt;div class="smallfont"&gt;&lt;input type="checkbox" name="purchaseorders[]" value='{"lnb_id":"2","lnb_amount":3}'&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1"&gt;&lt;div class="smallfont"&gt;46546&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1"&gt;&lt;div class="smallfont"&gt;TEKNİKSAT&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1"&gt;&lt;div class="smallfont"&gt;QUATTRO SİSTEM LNB&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" data-count="2"&gt;&lt;div class="smallfont" style="text-align: right;"&gt;2&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" data-price="20,00"&gt;&lt;div class="smallfont" style="text-align: right;"&gt;20,00 USD&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" data-discount="12"&gt;&lt;div class="smallfont" style="text-align: right;"&gt;12&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1"&gt;&lt;div class="smallfont" style="text-align: right;"&gt;??,?? USD&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;

&lt;tbody id="tbody_bbactive"&gt;
&lt;tr valign="top"&gt;
&lt;td class="alt1"&gt;&lt;div class="smallfont"&gt;&lt;input type="checkbox" name="purchaseorders[]" value='{"multiswitch_id":"125","multiswitch_amount":"1"}'&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1"&gt;&lt;div class="smallfont"&gt;31256&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1"&gt;&lt;div class="smallfont"&gt;SUNNY&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1"&gt;&lt;div class="smallfont"&gt;10X24 KASKAD MULTISWITCH&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" data-count="1"&gt;&lt;div class="smallfont" style="text-align: right;"&gt;1&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" data-price="160,00"&gt;&lt;div class="smallfont" style="text-align: right;"&gt;160,00 USD&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" data-discount="12"&gt;&lt;div class="smallfont" style="text-align: right;"&gt;12&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1"&gt;&lt;div class="smallfont" style="text-align: right;"&gt;???,?? USD&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;

&lt;tr&gt;
&lt;td class="alt1" style="text-align: left;"&gt;&lt;div class="smallfont"&gt;&lt;input type="checkbox" onclick="toggle(this);" /&gt; &lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" style="text-align: left;"&gt;&lt;div class="smallfont"&gt; &lt;b&gt;ALL SELECT&lt;/b&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" colspan="4" style="text-align: right;"&gt;&lt;div class="smallfont"&gt;&lt;b&gt;TOTAL PRODUCT MONEY: &lt;/b&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" colspan="2" style="text-align: right;"&gt;&lt;div class="smallfont"&gt;?.???,?? USD&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td class="alt1" colspan="4" style="text-align: left;"&gt;&lt;div class="smallfont"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" style="text-align: right;" colspan="2"&gt;&lt;div class="smallfont"&gt;&lt;b&gt;RATE OF DISCOUNT AND TOTAL DISCOUNT: &lt;/b&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" style="text-align: right;"&gt;&lt;div class="smallfont"&gt;12 %&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" style="text-align: right;"&gt;&lt;div class="smallfont"&gt;?.???,?? USD&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td class="alt1" colspan="4" style="text-align: left;"&gt;&lt;div class="smallfont"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" style="text-align: right;" colspan="2"&gt;&lt;div class="smallfont"&gt;&lt;b&gt;VAT:&lt;/b&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" style="text-align: right;"&gt;&lt;div class="smallfont"&gt;18 %&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" style="text-align: right;"&gt;&lt;div class="smallfont"&gt;?.???,?? USD&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td class="alt1" style="color: red; font-size:16px;text-align: right;" colspan="6"&gt;&lt;div class="smallfont"&gt;&lt;b&gt;ALL TOTAL MONEY:&lt;/b&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td class="alt1" style="color: red; font-size:16px;text-align: right;" colspan="2"&gt;&lt;div class="smallfont"&gt;&lt;b&gt;?.???,?? USD&lt;/b&gt;&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;<i>
</i>``
I still couldn't do this
Copy linkTweet thisAlerts:
@gecekuleauthorApr 29.2020 — https://codepen.io/adem-gen/pen/bGVRzYN?editors=1010

I can't do what I want, can you help me
Copy linkTweet thisAlerts:
@gecekuleauthorApr 29.2020 — @Nachfolger#1614354 I wanted to try this code but I couldn't run it

I do not have much information
Copy linkTweet thisAlerts:
@gecekuleauthorMay 09.2020 — https://codepen.io/adem-gen/pen/bGVRzYN?editors=1010

I could not collect in the lower area

Can you help me
Copy linkTweet thisAlerts:
@gecekuleauthorMay 11.2020 — Hello again,

It works the way I want to do

However, amateur coding

Live Demo: https://jsfiddle.net/ademgenc/a6hdw2vc/4/

There is a problem,

Last selection value remains when manual selections are deselected
×

Success!

Help @gecekule spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...