Need currency formatting on a SUM for cells

Hi there,
I can’t get the formatting to work on my sum. I have a table that has different rows and each row has a rowtotal, and then we have a total on top that keeps addings as the user enters input in the different cells. I’m adding three sums up on each row and I’ve included an onlostfocus interaction to add a formatting for currency that I took from here: . When adding the sum, the $.00 are getting added and it’s not working correctly. Is there a chance to have inputs summed up with the currency formatting as well?

Here is my file: testingthesum2.rp (66.6 KB)

Hi! If you’re working with sums, then you’ll want to ensure that before you add your numbers together that you remove the dollar signs and decimals from the values so that the numbers get summed together instead of sticking the entire strings onto each other. This can be done by appending .replace('$','').replace('.','') to your local variables when you add them together OnTextChange. To add the formatting back after the sum is completed, you can divide that value by 100 and use the .toFixed(2) function to add the two decimals back, and add the dollar sign at the front of the whole expression (outside of the square brackets).

Here’s an example for the OnTextChange interaction for one of the table’s text fields which will sum all 3 of the row’s cells together and display the value properly formatted in the row sum widget:

$[[((LVAR1.replace('$','').replace('.','') + LVAR2.replace('$','').replace('.','') + LVAR3.replace('$','').replace('.',''))/100).toFixed(2)]]

I’ve attached an edited version of your file for you to check out. Hopefully that does the trick!testingthesum2 Edit.rp (60.3 KB)

Hi Alissa,

Thanks for the file! This is much appreciatted. My only concern is that when trying your file, the NAN keeps showing, why is that?

Hi! Hmm, if you’re typing commas into the text fields along with the numbers, then the commas would interfere with the calculations and cause the result to read as NaN. To help with this, you’ll want to remove the commas from the numbers as you did with the dollar signs and decimal points. Adding .replace(',' '') to the function (along side the other .replace() methods) should strip the commas out of the numbers so that they can be summed correctly.

Hi Alyssa, thanks for the answer, but that’s not a solution. I wasn’t even entering commas actually, I just tried your file doing some “stress testing” by entering some integers and some decimals. My problem with adding this type of formulas, is that this always happens, they look nice, if you don’t have anyone interact with them, but as soon as the user tries to enter anything, they just break. I need to provide a prototype with rows that make sums, and that users can enter integers or decimals into the different cells, and once the field is on focus, I need the currency formatting on. But I wonder, Is that so hard to create? I am always frustrated about the amount of limitations that Axure provides, you can create prototypes, but they have 90% of the time problems with performance, you can enter custom string, but they mostly never work… please help. thanks in advance.

Also, supposly the formula you gave me first, already had the replace the commas, so why and how would I add the new replace? I just don’t understand.

What should happen if the users enters a non-number? It can’t be summed (NaN means “Not a Number” because 1 + a is not a number), so what’s the expected outcome? Should it be ignored? Should it cause an error and the user has to fix it before anything is summed? Should it be ignored and then show an error? It helps to be more specific with your requirements.

Everything I mentioned is doable in Axure. For example, you could add a conditions to each field so it only sums if numbers are present in the field.

Thanks for that but this still doesn’t fix my problem, because I am giving my users a specific scenario that doesn’t allow entering non numbers… So they will only be entering numbers and “.” for the decimals like “25.50”

Hi!

There’s a trick where you can limit text entry in a field to only keystrokes that you choose. The attached file will allow only numbers, the period, and the comma. (It also allows the keystrokes that let you arrow left and right, copy, paste, etc.)

(Paste the field into your file, then copy the OnKeyDown handler and paste it onto your existing field.)

The technique is explained here.

numbers_only_field.rp (58.0 KB)

That said, you can still get not-a-number errors if the user enters something like “0,…1”, so you may want to do some error checking (e.g., test if the sum value equals “NaN” before placing it in the field).

I’m not sure what problem you’re having, then. When I enter only numbers into the fields (ex. 5.6, 3.4, 7) everything works fine. What inputs are you putting in that cause NaN?

I entered 100000 in any field to get the NAN

That’s because of the issue Alyssa mentioned: you need to add .replace(',','') alongside the other replace methods.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.