CODEWITHSUNDEEP
jquery
amir
amir

Reputation:

how to add to value of an input field with Jquery

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.

Upvotes: 5

Views: 22494

Answers (4)

Emre Erkan
Emre Erkan

Reputation: 8482

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());
  });
});

Upvotes: 4

Mutation Person
Mutation Person

Reputation: 30498

To get the pound sign try

&#163; or &pound;

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

Upvotes: 2

Al.
Al.

Reputation: 2872

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

Upvotes: 4

blub
blub

Reputation: 2166

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() );

Upvotes: 2

Related Questions