CODEWITHSUNDEEP
javascriptjqueryjson
Joseph
Joseph

Reputation: 2712

Using data in JSON object for dynamic currency conversion

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.

Upvotes: 2

Views: 2090

Answers (2)

Eric
Eric

Reputation: 97631

Chose a better data format. Use meaningful currency ids in your HTML:

<select id="choice">
    <option value="GBP">Pounds</option>
    <option value="EUR">Euros</option>
</select>

And then use those as keys in your json object. Note that numbers should not be quoted.

//Assume base rate is dollars
var json = {
    "GBP": {
        "rate": 0.633
    },
    "EUR": {
        "rate": 0.725
    }
};

var price = $('#price'),
    currencyId = $('#choice'),
    converted = $('#converted');

price.keydown(function() {
    // Some browers call keydown before the character pressed has been added
    // to `.val()`. This gives them time to update the value
    setTimeout(function() {
        var currency = json[currencyId.val()];
        var amount = price.val() * currency.rate;
        converted.val(amount);
    }, 0);
});

demo

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1039110

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.

Upvotes: 2

Related Questions