Client-side javascript to format number (currency)

Question

Would like to format a field for currency in US Dollars. So if the user enters 14590.1 it will change it to 14,590.10. I would prefer not to even have the dollar sign, but my current code does have that.

I think what I have below is not bad, although I also want to check for a valid number and throw the user back in the field if it is not valid.

I thought this would be simple and there would be a function out there to do this, but I cannot find one.

Is there something better than what I threw together?

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:scriptBlock
        id="scriptBlock2"
        type="text/javascript">
        <xp:eventHandler
            id="formatNumber"
            submit="false"
            event="onClientLoad">
        <xp:this.script><![CDATA[   
        formatNumber = function(x) {

                //Must remove $ and any commas
                y = x.replace(',','');
                z = y.replace('$','');

                //Must fix to 2 decimal places
                if ((typeof z) === 'string'){
                    z = parseFloat(z).toFixed(2)}
                else {
                    z = z.toFixed(2)
                }   

                //Now put it back in the field
                XSP.getElementById("#{id:djCurrencyTextBox1}").value = parseFloat(z);
                XSP.partialRefreshPost('#{id:djCurrencyTextBox1}');
            }
]]></xp:this.script>
        </xp:eventHandler>
    </xp:scriptBlock>
    <xp:inputText
        id="djCurrencyTextBox1"
        value="#{viewScope.a}"
        styleClass="pull-right"
        style="width:200px;text-align:right"
        defaultValue="0">
        <xp:this.converter>
            <xp:convertNumber type="currency"></xp:convertNumber>
        </xp:this.converter>
        <xe:this.dojoAttributes>
            <xp:dojoAttribute
                name="input"
                value="text-align: right">
            </xp:dojoAttribute>
        </xe:this.dojoAttributes>
        <xp:eventHandler
            event="onchange"
            submit="false">
            <xe:this.script><![CDATA[val = XSP.getElementById("#{id:djCurrencyTextBox1}").value
formatNumber(val);]]></xe:this.script>
        </xp:eventHandler>
    </xp:inputText>
</xp:view>

I tried using dojo but what I cannot get it to do is to accept a value if the user doesn't enter two digits for cents. If a user enters 1234 and tabs out of the field I want that to be modified to 1234.00. If they enter 1234.8 and tab it should be 1234.80. I I don't think I am adding the correct attribute:

<xe:djCurrencyTextBox
        id="djCurrencyTextBox2"
        value="#{doc.prjAmtColumn11}"
        styleClass="pull-right"
        style="width:100px;text-align:right"
        defaultValue="0">
        <xe:this.dojoAttributes>
            <xp:dojoAttribute
                name="input"
                value="text-align: right" />
            <xp:dojoAttribute
                name="constraints"
                value="fractional:yes">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="places"
                value="2">
            </xp:dojoAttribute>
        </xe:this.dojoAttributes>
        <xe:this.constraints>
            <xe:djNumberConstraints
                currency="USD"
                fractional="auto"
                type="currency"
                places="2">
            </xe:djNumberConstraints>
        </xe:this.constraints>
        <xp:eventHandler
            event="onchange"
            submit="false">
            <xp:this.script><![CDATA[calculate();]]></xp:this.script>
        </xp:eventHandler>
    </xe:djCurrencyTextBox>

This may help: http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript/9318724#9318724 — Jonathan M, Aug 11 '16 at 20:58
This question could be suitable for [Code Review](http://codereview.stackexchange.com/help), as long as (a) your code works as intended, (b) your code is real code, rather than example code, and (c) your code is included in the body of the question. If you wish for a peer review to improve all aspects of your code, please post it on Code Review. — Heretic Monkey, Aug 11 '16 at 21:11
Have a look at the cleave.js if you only want to format the value in the UI and store the actual number value in the database, I just found it yesterday (so don't have any experience with it) but it might do the trick. — Mark Leusink, Aug 12 '16 at 10:23

Howard · Answer 1 · 2016-08-15T13:21:13.943

0

The Dojo Currency Text Box control does what you want and is included in 9.0.1 under the Dojo form drawer in the Controls panel.

Howard

<xe:djCurrencyTextBox id="djCurrencyTextBox1"
                value="#{document1.NumField_2}"
                promptMessage="enter a US dollar amount">
                <xe:this.constraints>
                    <xe:djNumberConstraints currency="USD"
                        type="currency">
                    </xe:djNumberConstraints>
                </xe:this.constraints>
                <xp:this.converter>
                    <xp:convertNumber></xp:convertNumber>
                </xp:this.converter>
            </xe:djCurrencyTextBox>

edited Aug 15 '16 at 13:21

answered Aug 12 '16 at 14:29

Howard

1,503
7
16

Howard, thanks for the reply. I added things that I am trying to do but cannot using dojo - auto expand to 2 decimal places. See above. Do you know what attribute I need to give to have the dojo currency text box do this? – Bryan Schmiedeler Aug 12 '16 at 14:47
But, it only adds the decimal places if you don't enter any decimal places at all, if you put in a decimal you have to add two... so, that may not do what you want... – Howard Aug 15 '16 at 13:24

Client-side javascript to format number (currency)

1 Answers1