Removing commas in 'live' input fields in jquery

Question

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.

parseFloat(tUnits.replace(/,/g,"")); – epascarello Jun 14 '13 at 15:53 — epascarello, Jun 14 '13 at 15:53

Jacob · Accepted Answer · 2013-06-14T16:08:51.670

3

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;

edited Jun 14 '13 at 16:08

answered Jun 14 '13 at 15:52

Jacob

77,566
24
149
228

That actually works brilliantly...except that the code throws ye olde' 'Unable to get property 'replace' of undefined or null reference.' The thing is if I just Ignore all the errors, it ends up working. My guess is that I've screwed something else up in between all of this. Thoughts? – mkautzm Jun 14 '13 at 16:02
Maybe `val()` is not returning a string. I guess you could do a check for that beforehand. Adding update. – Jacob Jun 14 '13 at 16:07
The update cleared it all up! Many thanks to you sir, you've saved me a lot of time! – mkautzm Jun 14 '13 at 16:16

Removing commas in 'live' input fields in jquery

1 Answers1

Linked