CODEWITHSUNDEEP
javascriptjqueryinputnumber-formatting
mkautzm
mkautzm

Reputation: 1146

Removing commas in 'live' input fields in jquery

I have a series of input boxes in a table with some number of dynamically generated rows as such:

<table id="someDataTable">
    <tbody>
        <tr>
            <td >Some Title</td>
            <td >Units</td>
            <td >Val/Unit</td>
            <td >Value</td>
        </tr>
        <tr>
            <td><input type="text" size="30" /></td>
            <td><input type="text" size="14" class="units commas"/></td>
            <td><input type="text" size="14" class="value commas"/></td>
            <td><input type="text" size="14" readonly="readonly" class="autoTotal"/></td>
        </tr>
...
    </tbody>
</table>

Now, I have a blur() call to add commas every time an input box is exited to add commas with the nifty Number Formatter plugin, and it simply does this:

<script>
$(".commas").blur(function () {
     $(this).parseNumber({ format: "#,###", locale: "us" });
     $(this).formatNumber({ format: "#,###", locale: "us" });
});
</script>

And it works beautifully. Now, on the other side, I also have a chunk of code that does the form math automatically on every keystroke. It has a call in initialize() that looks like this:

 $(document).on('keyup', '#someDataTable', DoCalculations);

The function it invokes looks like this:

function DoCalculations() {
    $(this).find('tr').each(function () {
        var tUnits = $(this).find('.units').val();
        var tValue = $(this).find('.value').val();
        $(this).find('.autoTotal').val(Math.round(tUnits * tValue));
    });
}

--

Now, my problem: I need to be able to rip out the commas to do the calculations. I was hoping to be able to use NumberFormatter's parseNumber() function to do this, but it was having a small fit. This was the alternate code in DoCalculations to attempt to accomplish that:

function DoCalculations() {

    $(this).find('tr').each(function () {

        var tTotal;
        var tUnits = $(this).find('.units').val();
        var tValue = $(this).find('.value').val();

        tUnits = $.parseNumber(tUnits, { format: "#,###", locale: "us" });
        tValue = $.parseNumber(tValue, { format: "#,###", locale: "us" });

        tTotal = tUnits * tValue;
        tTotal = $.formatNumber(tTotal, { format: "#,###", locale: "us" });

        $(this).find('.autoTotal').val(tTotal);
    });
}

But it comes back with a runtime error in NumberFormatter.js, where it cannot get the property of numberString.indexOf of undefined or null reference. Line 442 to be exact. I'm not sure why though. I originally thought it was because there were empty input boxes, but that turned out to not matter.

At the end of the day, I need to strip out commas.

Upvotes: 0

Views: 6232

Answers (1)

Jacob
Jacob

Reputation: 78840

Removing characters is something that regular expressions excel at:

var tValue = parseFloat($(this).find('.value').val().replace(/,/g, ''));

UPDATE

If val() can be null/undefined, you can add a check like this:

var tValue = $(this).find('.value').val();
tValue = tValue ? parseFloat(tValue.replace(/,/g, '')) : 0;

Upvotes: 3

Related Questions