Need currency pound symbol before amount calculation

JavaScript
1

I need to display a pound currency symbol before the amount that is calculated

Below is the code I currently have

<th class="text-right py-1 px-2 grand-total">0</th>

function calc(){

        var grand_total = 0;

        $('table#list tbody input[name="total[]"]').each(function(){

            grand_total += parseFloat($(this).val())

        })

        $('table#list tfoot .grand-total').text(parseFloat(grand_total).toLocaleString('en-gb', {style:'decimal',maximumFractionDigit:2}))

        $('[name="amount"]').val(parseFloat(grand_total))
    }

I’m not sure where to add it within that code, can anyone help please

2

Hi, you can modify the .text() line to prepend the pound symbol like this:

$('table#list tfoot .grand-total').text(
  '£' + parseFloat(grand_total).toLocaleString('en-gb', { 
    style: 'decimal', 
    maximumFractionDigits: 2 
  });
);

You also have a typo in your .toLocaleString() options. The correct option is maximumFractionDigits, not maximumFractionDigit.

1 Like
3

Thank you so much, that worked perfect, had to did a small amendment to the code and changed the last part of the code to the following as tried what you had and it just said 0 and didn’t do the calculation

       }));

instead of

     });
    );

Thank you for spotting the typo as well, appreciate it. I didn’t even see that, thank you again

4

Ah, good catch. That was me trying to format things in the code editor here.

Glad it is working now :+1:

1 Like
5

Thank you, know what you mean, it’s bit tricky with the code editor at times on here and formatting the code

6

I know you’ve gotten this working, but I’d suggest it would be better just to handle this in css as it’s purely decorative.

.grand-total::before {
  content: '£';
  margin-right: .5ch;
  font-weight: bold;
}
7

In my view the currency symbol is not purely decorative. It’s an important part of the text.

8

Not what I meant by being decorative, but I concede the point.

My point was the pound symbol doesn’t have an effect on the actual value like say, a + or - would, or a percentage sign where the symbol missing could have an adverse effect on something else. The pound sign provides context but doesn’t intrinsically alter the value of the content.

9

How about usind style: "currency" instead?

There may be a requirement to round down to the nearest pence digit, for example after a VAT calculation.

10

Intl.NumberFormat - JavaScript | MDN

S’almost like this problem has been encountered before :wink:

3 Likes