Click here to Skip to main content
11,642,381 members (61,122 online)
Click here to Skip to main content
Add your own
alternative version

JavaScript Number Parsing and Formatting for Multicultural Environments

, 21 Dec 2010 CPOL 13.7K 342 13
A JavaScript class used to help in formatting and parsing numbers when parseInt and parseFloat are not enough
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JSTester.aspx.cs" Inherits="NumberFormatterExample.JSTester" %>

<!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 runat="server">
    <title></title>
    <script src="Scripts/NumberFormat.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/json2.js" type="text/javascript"></script>
    <script type="text/javascript">
        var _formatted = $();
        var _unformatted = $();
        var _formatName = $();
        var _testValue = $();
        var _testFormat = $();
        var _formatter = new Formatting.NumberFormatter(new Formatting.NumberFormatInfo());

        $(function () {
            _formatted = $("#formatted .value");
            _unformatted = $("#unformatted .value");
            _formatName = $("#formatName");
            _testValue = $("#testValue");
            _testFormat = $("#testFormat");

            _testFormat.click(function () { call(); });
            $("#testParse").click(function () { testParse(); });
        });

        function call() {
            var settings = $.extend({}, $.ajaxSettings);
            settings.contentType = 'application/json; charset=utf-8';
            settings.dataType = "json";
            settings.async = false;
            settings.type = "POST";
            settings.url = "FormattingServices.svc/GetFormat";
            settings.data = JSON.stringify({ format: _formatName.val() });
            //settings.processData = false;
            settings.cache = false;
            settings.success = function (returnObject) {
                testFormat(new Formatting.NumberFormatter(new Formatting.NumberFormatInfo(returnObject.GetFormatResult)));
            }
            settings.error = function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
            $.ajax(settings);
        }

        function testFormat(formatter) {
            ///<summary>Method used to test formatters</summary>
            ///<param name="formatter" type="Formatting.NumberFormatter">The formatter to use</param>
            _formatter = formatter;
            var value = parseFloat(_testValue.val());

            _formatted.val(formatter.ToString(value));

            value = formatter.TryParse(_formatted.val(), function (errorMessage, parsedValue) {
                alert(errorMessage);
            });

            _unformatted.val(value.toString());
        }

        function testParse() {
            value = _formatter.TryParse(_formatted.val(), function (errorMessage, parsedValue) {
                alert(errorMessage);
            });

            _unformatted.val(value);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" class="page">
    <div style="float: left">
        Name<input type="text" style="display: block" id="formatName" /></div>
    <div style="float: left">
        Value<input type="text" style="display: block" id="testValue" /></div>
    <div>
        &nbsp;<input type="button" style="display: block" id="testFormat" value="Test" /></div>
    <div class="ctnt" style="clear: both">
        <div id="formatted" style="float: left">
            <div>
                Formatted</div>
            <input type="text" style="display:block" class="value" />
        </div>
        <div id="unformatted" style="float: left; margin-left: 40px;">
            <div>
                Unformatted</div>
            <input type="text" style="display:block" class="value" />
        </div>
        <div style="float: left; margin-left: 40px;">
            <div>&nbsp;</div>
            <input type="button" style="display:block" id="testParse" value="Test parse" />
        </div>
        
    </div>
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Luc Veronneau
Web Developer Faltour Inc.
Canada Canada
From the beginning i have always been passionate about everything. I have never actually studied in computer programming but life brought me in IT departments from the beginning of my career. The more i programmed the more i liked it. Ever since, i've been hooked.

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150731.1 | Last Updated 21 Dec 2010
Article Copyright 2010 by Luc Veronneau
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid