Javascript code: dynamically change currencies with dropdown HTML

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

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 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/

Answer 3

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