how to add to value of an input field with Jquery

Question

hi every one,

I have a input field like below,

 <input name="update_price" type="text" id="update_price" value="£" size="8" 
        maxlength="8" />

I'd like to get some price value from the value of a select box and add it after the £ sign, how is this achieved in jquery,

  <form>
                <select name="select" id="select">
                  <option>Select your pizza</option>
                  <option value="6.65">NY, 10&quot;, £6.65</option>
                  <option value="8.95">NY, 12&quot;, £8.95</option>
                  <option value="11.95">NY, 16&quot;, £11.95</option>
                  <option value="3.45">Chicago, 7&quot;, £3.45</option>
                  <option value="6.65">Chicago, 10&quot;, £6.65</option>
                  <option value="8.95">Chicago, 12&quot;, £8.95</option>
                  <option value="11.95">Chicago, 16&quot;, £11.95</option>
                  <option value="19.95">Chicago, Beast 24&quot; x 18&quot;, £19.95</option>
                 </select>
         </form>



    $(function()
    {
   $('#select').change( function() {

 $('input[name=update_price]').val($("#select :selected").val() );
  });
   });

it works with the code above but the £ sign disappears, any help would be appreciated.

Answer 1

One solution is to put the Pound sign in the value tag of the options in the select box.

<option value="€ 6.65">NY, 10&quot;, £6.65</option>

But that might deliver problems when calculating with this value. Nicer is the following:

$('input[name=update_price]').val("€"+$("#select :selected").val() );

I don't have the pound sign on my keyboard, hence the € :)

//edit

<input type='hidden' name='shopping_cart_value' value='0'>

$('input[name=update_price]').val("€"+$("#select :selected").val() );
$('input[name=shopping_cart_value]').val($("#select :selected").val() );

Answer 2

In the past I have used a background image on the input box for the currency symbol. That way the symbol can look pretty, be left aligned (while the value is right aligned) and it doesn't get in the way of calculations.

Hope that helps

Answer 3

To get the pound sign try

£ or £

also, check out this for more on these codes: http://www.ascii.cl/htmlcodes.htm

Answer 4

Are the encoding of file and page is same? If you want to use special characters like pound sign you have to save your javascript file UTF-8 (without bom character. You can use notepad++ or a similar editor for that)

Btw you specified an id for input, so why not using that for assigning it's value and last, you can use this when you are in the change function scope. See below

$(function() {
  $('#select').change(function() {
    $('#update_price').val("£" + $(this).val());
  });
});