0

I am having an issue summing the values of elements having a certain name. I have been attempting to use my own version of the answer from this post, but am having no luck.

Here is where the elements I want to sum are found:

@foreach ($items as $item)
  <tr>
    <td>{{ $item[0]->name }}</td>
    <td>{{ $item->quantity[0]->quantity }}</td>
    <td>${{ $item[0]->price }}</td>
    <td name="subtotal">{{ $item->quantity[0]->quantity * $item[0]->price }}</td>
  </tr>
@endforeach

This all outputs correctly and as you can see, I am using laravel 5's blade and I am wondering if this has to do with why I can't get this to work. If there is a better way to do this with laravel, please let me know.

Here is my script that I am using, it is placed below the above code:

<script>
  var arr = document.getElementsByName('subtotal');
  var tot=0;
  for(var i=0;i<arr.length;i++){
      if(parseFloat(arr[i].value))
      {
          tot += parseFloat(arr[i]);
      }
  }
  document.write(tot);
</script>

I have been messing with it for a while and have not been able to have any luck. What I do know is that the length of the array ends up being 2 (which it should), but it never makes it inside the if statement.

When I check the output by using document.write(arr[0].value), it outputs 'undefined' and I can't seem to pin point as to why this is. The value of tot always ends up being 0.

Any help is appreciated and let me know if any more info is needed.

Thanks!

Community
  • 1
  • 1
ddrossi93
  • 385
  • 2
  • 7
  • 19
  • `td`s don't have `value`, they have `textContent` ... Also, `name` of `td` is deprecated, use `class` instead to group elements. – Teemu Jun 16 '17 at 07:15
  • @Teemu please add it as an answer and I will gladly accept it. – ddrossi93 Jun 16 '17 at 07:17
  • Apart from that - do you want to calculate the sum in Laravel (i.e. on the server, *before* you send the HTML to the browser) or in JavaScript (on the client, *after* the browser has received the HTML)? Because, by the looks of it, you build the table on the server, so it's sensible to calculate the sum on the server as well. – Tomalak Jun 16 '17 at 07:18
  • @Tomalak yes, I was looking into that before looking at this route, but was running into issues so I saw people were having luck with the js route so I looked deeper into that. I would be glad to start a chat with you to give that a go if you like – ddrossi93 Jun 16 '17 at 07:20
  • Just because you did not get it to work with Laravel on the first try, it's silly to write JS that does this calculation on the client. It just does not make any sense at all, I hope you can see what I mean. Your question should be about how to sum a table in Laravel. – Tomalak Jun 16 '17 at 07:30
  • @Tomalak yep. Completely understand. If only it was just the first try haha I'll look into it. Thanks. – ddrossi93 Jun 16 '17 at 07:36
  • I don't know too much about Laravel in particular, but what you need to do in principle is query an additional, calculated column from the DB (`quantity * price`) and then to this: https://stackoverflow.com/a/21680118/18771. And I am sure there are more ways to do it, like calculated properties on the model. – Tomalak Jun 16 '17 at 07:41

2 Answers2

0
// Grab all of the subtotals and convert them into a real array. 
var subtotals = [].slice.call(document.querySelectorAll('td[name="subtotal"]'));

// Process all of our elements and add them together to produce the total
var total = subtotals.reduce(function(total, item) {
    return total + parseFloat(item.textContent, 10);
}, 0);


// Do something with the total…
document.write(total);

Documentation for reduce can be found here

Kristian Roebuck
  • 3,209
  • 2
  • 21
  • 29
-1

Try with the below script code:

var total = 0;
$('td[name="subtotal"]').map(function(index, td) {
    total += parseFloat($(td).text());
});

console.log(total);

Hope this helps you.

AddWeb Solution Pvt Ltd
  • 21,025
  • 5
  • 26
  • 57