jQuery UI & Spinner: Currency

This entry is part 3 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Currency

Example of a donation form, with currency selection and amount spinner.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Currency</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/jquery.mousewheel.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.culture.de-DE.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.culture.ja-JP.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#currency').change(function () {
                $('#spinner').spinner('option', 'culture', $(this).val());
            });

            $('#spinner').spinner({
                min: 5,
                max: 2500,
                step: 25,
                start: 1000,
                numberFormat: 'C'
            });
        });
    </script>
</head>
<body>

<p>
    <label for='currency'>Currency to donate</label>
    <select id='currency' name='currency'>
        <option value='en-US'>US $</option>
        <option value='de-DE'>EUR €</option>
        <option value='ja-JP'>YEN ¥</option>
    </select>
</p>
<p>
    <label for='spinner'>Amount to donate:</label>
    <input id='spinner' name='spinner' value='5'>
</p>

</body>
</html>
Try The Code
Series Navigation<< jQuery UI & Spinner: Time
jQuery UI & Spinner: Overflow >>