Javascript code: dynamically change currencies with dropdown HTML - php

Question

I have been looking for this all day - Change currencies throughout the page when choosing between countries or currencies from dropdown menu.
What I basically need is a dropdown menu which shows countries or currencies. When you select anyone of it like USD all the prices throughout the page are changed to USD. Now if you change it AUD/CAD/PKR etc they will be changed accordingly. I basically need it in Javascript but if anyone can provide it in PHP, it would be okay too.
A very good example of this is: http://creativeon.com When you change currency from right top dropdown menu - it changes the currencies of all the packages in the main content.
I am a HTML developer and do not know much about javascript. Please help me.
P.S. I have searched codingforums.com too and found only two links which are not of my use because they are currency converter:
http://www.codingforums.com/showthread.php?t=196577
http://www.codingforums.com/showthread.php?t=196373

Answer 1

The beauty of webapps is that you can borrow good ideas by looking a the source code (using a toll like the Firebug plugin in FF). As you can see in the example you mention the page is reloaded when a different currency is chosen:
$('#Items, #Items_input').change(function(){
$.post('/conlogic/ajax.php?action=currency',
{'curr': $(this).val()},
function(data){
if ( data=="OK" ) window.location.reload();
});
});
Apparently in this case the page is re-rendered server side with the different currency.

Answer 2

I write a javascript version. no Ajax, currency change rates was borrowed from google.
HTML Code
<select id="currencySelector">
<option value="usd">USD</option>
<option value="aud">AUD</option>
<option value="eur">EUR</option>
<option value="gbp">GBP</option>
</select>
<div class="currency" data-currencyName="usd">15<span>USD</span></div>
<div class="currency" data-currencyName="eur">15<span>EUR</span></div>
<div class="currency" data-currencyName="gbp">15<span>BGP</span></div>
<div class="currency" data-currencyName="aud">15<span>AUD</span></div>
Javascript Code
var
selector = document.getElementById("currencySelector");
var
currencyElements = document.getElementsByClassName("currency");
var
usdChangeRate = {
AUD: 1.0490, // 1AUD = 1.0490 USD
EUR: 1.4407, // 1EUR = 1.4407 USD
GBP: 1.6424,
USD: 1.0
};
selector.onchange = function () {
var
toCurrency = selector.value.toUpperCase();
for (var i=0,l=currencyElements.length; i<l; ++i) {
var
el = currencyElements[i];
var
fromCurrency = el.getAttribute("data-currencyName").toUpperCase();
if (fromCurrency in usdChangeRate) {
var
// currency change to usd
fromCurrencyToUsdAmount = parseFloat(el.innerHTML) * usdChangeRate[fromCurrency];
var
// change to currency unit selected
toCurrenyAmount = fromCurrencyToUsdAmount / usdChangeRate[toCurrency];
el.innerHTML = toCurrenyAmount + "<span>" + toCurrency.toUpperCase() + "</span>";
el.setAttribute("data-currencyName",toCurrency);
}
}
};
Run the code
You can run the code above at http://jsbin.com/ewuyoq/5 or build your own version http://jsbin.com/ewuyoq/5/edit

Answer 3

I would use jQuery, so feel free to disregard my answer if you don't want to use an external library. It can be found on www.jquery.com.
First, you make a span for all places where currency should be changed, give it class "currency" and in the name attribute, you put the value in your "base currency". Example:
<span class="currency" name="499"> 499 </span>
Then you can make a button, say it has id "showInEuro".
<input type="button" id="showInEuro" />
Then write some jQuery code similar to this:
var usdToEuroExchRate = 1.5; // Obviously just a magic constant
// When the button is clicked
$("#showInEuro").click(function() {
// Iterate through all of the currency spans
$("span.currency").each(function(index) {
// And take their names times the exchangerate and put it in the span.
$(this).text($(this).attr("name") * usdToEuroExchRate);
});
});
Of course, you should try to use real, live exchange rates.
I made a JSFiddle for you: http://jsfiddle.net/An3v9/9/