Home/ Questions/Q 7087629
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:41:52+00:00

I’m in the process of creating a small currency conversion script using the money.js

  • 0

I’m in the process of creating a small currency conversion script using the money.js library and have run into a problem with the .append(); part. Here is what I have so far:

<script type="text/javascript">
$(document).ready(function () {

    function pfxCurrencyConverter() {
        //get the users options from the form and store in variables
        var pfxFromCurrency = $('#pfx-from-currency').val();
        var pfxToCurrency = $('#pfx-to-currency').val();
        //set base options
        fx.base = pfxFromCurrency
        fx.settings = {
            from: pfxFromCurrency
        };
        //  get the amount input by the user
        var inputAmount = $('#pfx-input-amount').val();

        // Load exchange rates data via the cross-domain/AJAX proxy:
        $.getJSON('http://openexchangerates.org/latest.json', function (data) {
            // Check money.js has finished loading
            if (typeof fx !== "undefined" && fx.rates) {
                fx.rates = data.rates;
                fx.base = data.base;
            } else {
                // If not, apply to fxSetup global:
                var fxSetup = {
                    rates: data.rates,
                    base: data.base
                }
            }
            var convertedValue = fx.convert(inputAmount, {to: pfxToCurrency});

            $("#currencies").append("<li>New Value" + convertedValue + "</li>");
        });
    } //end pfxCurrencyConverter
    $(document).ready(function () {
        pfxCurrencyConverter();
    });
</script> 

</head>
<!-- output form for user to populate -->

<!-- Output the front end form, include external stylesheet and define customisable css -->

</head>
<!-- output form for user to populate -->
<body>
<form method="get" onsubmit="return pfxCurrencyConverter();">
Amount: <input type='text' id='pfx-input-amount' /><br />
From: <select id='pfx-from-currency'>
    <option>Please Choose</option>
    <option>GBP</option>
</select><br />
To: <select id='pfx-to-currency'>
    <option>Please Choose</option>
    <option>USD</option>
</select><br />
<input type='submit' value='Convert' />
</form>
<ul id="currencies"></ul>
</body>
</html>

I have also this in the html right after the submit button, it works fine with just a string but stops working once I add + convertedValue

<script>document.write("New Value" + convertedValue);</script>

Any help is greatly apprecited

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem was that the .append() was being called before the value was returned from getJson(). Placing the .append() inside the .getJson() solved the problem. This works:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="http://josscrowcroft.github.com/money.js/money.js"></script>
        <script type="text/javascript">

            function ConvertMoney(to, from, amt) {
                // Load exchange rates data via the cross-domain/AJAX proxy:
                $.getJSON('http://openexchangerates.org/latest.json',
                        function (data) {
                            // Check money.js has finished loading:
                            if (typeof fx !== "undefined" && fx.rates) {
                                fx.rates = data.rates;
                                fx.base = data.base;
                            } else {
                                // If not, apply to fxSetup global:
                                var fxSetup = {
                                    rates: data.rates,
                                    base: data.base
                                };
                            }

                            var result = "<li>" + fx.convert(amt, { from: from, to: to }) + "</li>";
                            $("#result").append(result);
                        });
            }

            $("#convert").live("click", function () {
                var from = $("#pfx-from-currency").val();
                var to = $("#pfx-to-currency").val();
                var amt = $("#pfx-input-amount").val();

                ConvertMoney(to, from, amt);
            });

$(document).keypress(function(e) {
    if(e.keyCode == 13) {
          var from = $("#pfx-from-currency").val();
                var to = $("#pfx-to-currency").val();
                var amt = $("#pfx-input-amount").val();

                ConvertMoney(to, from, amt);
    }
});

        </script>
    </head>
    <body>
    Amount:
    <input type='text' id='pfx-input-amount' /><br />
    From:
    <select id='pfx-from-currency'>
        <option>Please Choose</option>
        <option>GBP</option>
    </select><br />
    To:
    <select id='pfx-to-currency'>
        <option>Please Choose</option>
        <option>USD</option>
    </select><br />
    <input type='button' id="convert" value='Convert' />
    <ul id="result">
    </ul>
</body>
</html>
    • 0