Javascript - Calculator needs to display currency symbol

Question

Hoping for a quick answer here, so here goes...

I have a very simple Calculator script. Takes an input from 2 boxes and multiplies them by hidden values then displays them in a simple span "Total" tag. Works perfectly, except I need it to display a '£' before the figures.

I don't know if I would be best using a Regular Expression or if there is a simple way for me to prepend the amount shown with a simple '£'.

Here's the code, hope someone can help!

$(function () {
    $('#txtTables, #txtIndividuals').on('input', function () {
        var tablePrice = $('#hdnPricePerTable').val();
        var indPrice = $('#hdnPricePerIndividual').val();
        var totalTablePrice = tablePrice * $('#txtTables').val();
        var totalIndPrice = indPrice * $('#txtIndividuals').val();
        $('#total').text(totalIndPrice + totalTablePrice);
    });
});

Thanks everyone!

Answer 1

Assuming you aren't performing any calculations on the total just prepend it. The the code you have written and the suggestion below will overwrite any previously contained content to the #total element.

var totalPrice = parseInt(totalIndPrice, 10) + parseInt(totalTablePrice, 10);

$('#total').html("£" + totalPrice);

Answer 2

you could use £ or £ for showing that symbol before the result

Answer 3

I would not add it into the field.

You can make it different way: simply show it over the input.

See example just to see an idea. I've done in Chrome, so I am not sure it is shown good in other browsers (simply because user-agent default styles are different) but it is easily fixable for every one.

HTML:

  <div class="currency">&pound;</div>

  <input>

CSS:

.currency {
  position: absolute;
  padding: 4px 7px;
}