Using JavaScript to show total of an order

Question

I have a table of items available for purchases which I am displaying on the site. I am using mysql to fetch all the items and display them in a table. Among others, the table contains this:

<input type="hidden" name="price" id="price'.$id.'">  //id is one part of MySQL query results
<input type="text" name="count_'.$id.'">

All this is displayed for around 200 items with ID being not completely in sequence (I found some JavaScript code that used for (i = 0; i < rows.length; i++) {}, however, with my IDs not being in a sequence, this is not a good option for me).

I would like to display a total of an order using JavaScript and I am not experienced when it comes to JS. I would be very thankful for your advices.

Why would the order of IDs matter if you're calculating the total of all rows? — Christian, Feb 21 '14 at 12:12
It is kind of messy and not comprehensible for english speakers, is it necessary? — Maroš Gašparík, Feb 21 '14 at 12:12
please clarify clearly. what you want `total no of item in order` or `total price of an order`. also does `$id` has the count of each item? — krishna, Feb 21 '14 at 12:29

score 1 · Accepted Answer · answered Feb 21 '14 at 12:15

1

You coul duse jQuery:

function orderTotal()
{
   var total=0;
   $('input[name="price"]').each(function(){
      var price = parseFloat($(this).val());
      var amount = parseFloat($('input[name="count_'+$(this).attr('name').substring(5)+'"]').val());
      total += price+amount;
   });
   return total;
}

answered Feb 21 '14 at 12:15

Oscar Pérez

4,377
1
17
36

Corrected the type of `price`and `amount`. But the reference to `count` is better this way beacuse it is more robust to possible changes in the HTML. – Oscar Pérez Feb 21 '14 at 12:19
Removed the downvote because it will work (didnt test if it does), but the amount selector is still very messy, which isn't needed – Martijn Feb 21 '14 at 12:19
I agree with your previous comment in that a `.next()` would be simplier, but it relies in that the next element to `price` is `count`... In my version, if the page style changes, the code keeps working. – Oscar Pérez Feb 21 '14 at 12:21
Thanks for your comments. One more question before I try to get it to work - do I have to trigger this function after every change of input values? – Maroš Gašparík Feb 21 '14 at 12:31
Yes. This function reads the input values and rturns the total price. So, you need to trigger it every time you need a new total. – Oscar Pérez Feb 21 '14 at 12:32
What type of event should I use? I already have a onKeyDown event to prevent from submitting the form when enter is pressed. – Maroš Gašparík Feb 21 '14 at 12:42
I used this solution, however, the JS does not seem to be working. Event the functions that were previously functional dont work now. Where could be the problem? – Maroš Gašparík Feb 21 '14 at 12:52
There must be a syntax error. Could you look at the Javascript console, Firebug or similar? (for example with Firefox, Chrome or Safari) – Oscar Pérez Feb 21 '14 at 12:54
And: do you have the jquery script loaded in your page? – Oscar Pérez Feb 21 '14 at 12:54
I do have a file jQuery.js that I use for displaying onMouseOver pictures of the products. Do you think this file contains everything that is needed? – Maroš Gašparík Feb 21 '14 at 12:56
Everytime I change some value it types: Uncaught ReferenceError: checkForEnter is not defined and same goes for the checkForEnter() function. Also: Uncaught SyntaxError: Unexpected token } bp.....com/:106 event.returnValue is deprecated. Please use the standard event.preventDefault() instead. – Maroš Gašparík Feb 21 '14 at 13:04
mmmm.... I think the error is `Uncaught SyntaxError: Unexpected token } bp.....com`. Could you try to solve it? What browser are you using? Could I take a look to your webpage? – Oscar Pérez Feb 21 '14 at 13:09
Is there a way to give you a link privately? – Maroš Gašparík Feb 21 '14 at 13:12
Send it in an email to my name (just the first word) followed by @amidasoft.com – Oscar Pérez Feb 21 '14 at 13:16

Martijn · Answer 2 · 2014-02-21T12:51:47.260

I suggest you wrap them in another element, lets use div. Add a class to that, lets say moneyline

<div class="moneyline">
    <input class="price" type="hidden" name="price" id="price'.$id.'">  //id is one part of MySQL query results
    <input class="quantity" type="text" name="count_'.$id.'">
</div>

Im going to give the example with jQuery, and some button to trigger it:

$('#someButton').on('click', function(){
    var total = 0;
    $('.moneyline').each(function(){
        var price = parseInt($(this).find('.price'), 10);
        var quantity = parseInt($(this).find('.quantity'), 10);
        total+= quantity*price;
    });
    alert( total );
});

score 0 · Answer 3 · edited May 23 '17 at 12:10

0

Consider adding a class to each element that you want to count and see the answer below on stackoverflow. You should be able to have a counter for each occurrence of the class and show this variable in the html

How to getElementByClass instead of GetElementById with Javascript?

<div class="item"> ... <your inputs> ... </div>

edited May 23 '17 at 12:10

Community

1
1

answered Feb 21 '14 at 12:16

lecreate

1
2

Using JavaScript to show total of an order

3 Answers3