Question

I have an HTML document with the following form:

<form>
    <input type="text" id="price">
    <input type="text" id="converted">
</form>

I also have the following JQuery:

$('#price').bind('keypress keyup', function() {
    amount = $(this).val() * 30;
    $('#converted').val(amount);
});

This works just as I want it to. If I type an amount in “price” then the value in “converted” is updated with whatever I typed, multiplied by 30.

However, I want this to support two different exchange rates, so I have created the following select in the form:

<select id="choice">
    <option value="1">Currency 1</option>
    <option value="2">Currency 2</option>
</select>

I know that I could set the values above to be the actual exchange rates and then this problem would be solved pretty quickly. However, I need the values to be the currency IDs for when the form is submitted. Therefore, I have made the following JSON object available:

[{"Currency":{"id":"1","rate":"30"}},{"Currency":{"id":"2","rate":"25"}}]

I have this available inline in the DOM because I don’t want to waste an ajax request every time new figures are typed in the input fields. The conversion doesn’t need to be THAT up-to-date. The above JSON object has been generated using CakePHP’s $javascript->Object and I can have it display either within script tags or any other way that would make it easily accessible to JQuery.

The part that I’m struggling with (and possibly can’t find on Google because I don’t know which terminology to use) is a way to use either ’30’ or ’25’ as the multiplier on the 2nd line of my JQuery depending on whether option value ‘1’ or ‘2’ is chosen in the select.

Answer 1

var json = [{"Currency":{"id":"1","rate":"30"}},{"Currency":{"id":"2","rate":"25"}}];

$('#price').bind('keypress keyup', function() {
    var rate = $(json).filter(function() {
        return this.Currency.id == $('#choice').val();
    }).get(0).Currency.rate;
    var amount = $(this).val() * rate;    
    $('#converted').val(amount);
});

And here’s a live demo to see this in action.