Forms - Display numeric fields with thousands separators

Hi Joanne,

something similar has been discussed before in this thread: How to add thousand separators to integer fields in a repeating section 

Unfortunately the code provided doesn't work out of the box as you will have to add the "NWF" in front of each "$"-selector.

Just take this corrected code and put it into your Form Settings -> Custom Javascript section:

function commaSeparateNumber(val){
     if (!val){
          return 0;
     }
     while (/(d+)(d{3})/.test(val.toString())) {
          val = val.toString().replace(/(d+)(d{3})/, '$1'+','+'$2');
     }
     return val;
}
function doNumberFormat(){
     NWF$('.numbers .ms-rtestate-field').each(
          function(index,element){
               NWF$(this).html(commaSeparateNumber(NWF$(this).html()));
          });
     NWF$('.numbers .nf-calculation-control').each(
          function(index,element){
               NWF$(this).html(commaSeparateNumber(NWF$(this).html()));
          });
}

setTimeout(doNumberFormat, 5000);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

As described in the post above you can change the number in the "setTimeout" function to let the seperators appear faster after page load.

Still wondering why Forms designer doesn't offer numeric formatting by default!

Best Regards

Philipp

good catch there Philipp...the $ thing works on my pages because I always load a different version of Jquery than the one shipped with Nintex and call noconflict().

my bad...i didnt realise this while writing the answer

Thanks Philipp. Where do I call the function from? I've called javascript from the validation section of the control previously, however i imagine that is not the location for this particular issue. 

worked it out from another post. include 'numbers' as the CSS class in the control. Thanks Phillip. This works great. 

Hi all

I did all of these steps, but I couldn't be able to run the function correctly! 

I just copied the code and paste it in custom JS section in my form and after that I set fields that exist for my field as a below picture

What's my wrong?

--------------------

Regards

Amir

Hi

any body there for helping me?

Hi Amir,

can you open your browsers developer tools, refresh your forms page and have a look in the console if any errors are thrown?

To see if your JS code actually gets applied you can also insert a "console.log('Hello World')"  at line 10 of the code and check if this is logged to the console. If it doesn't appear in the console, the code isn't applied at all and we may need to dig a little deeper.

Cheers

Philipp

Hi Philipp

Sorry for my delay.

I tested your solution, I saw the message in the console, but still I can't run this code in my form! 

I only want to add thousands separator to one singleline field! 

Could you help me?

I changed some parts of your code for fitting my form, but it doesn't work

function commaSeparateNumber(val){

if (!val){
return 0;
}
while (/(d+)(d{3})/.test(val.toString())) {
val = val.toString().replace(/(d+)(d{3})/, '$1'+','+'$2');
}
alert(val);
return val;
}
function doNumberFormat(){

NWF$('.numbers').each(
function(index,element){

NWF$(this).html(commaSeparateNumber(NWF$(this).html()));
});
}

setTimeout(doNumberFormat, 1000);

Regards

Amir

Hi Amir,

after copying your code directly i received an error in the browser console that was caused by wrong formatting. Bur basically your code is working. Try to take this one:

function commaSeparateNumber(val){

     if (!val){
          return 0;
     }
     while (/(d+)(d{3})/.test(val.toString())) {
          val = val.toString().replace(/(d+)(d{3})/, '$1'+','+'$2');
     }

     return val;
}
function doNumberFormat(){
     console.log("entered doNumberFormat")
     NWF$('.numbers').each(
          function(index,element){
               NWF$(this).html(commaSeparateNumber(NWF$(this).html()));
          });
}setTimeout(doNumberFormat, 1000);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Just copy it from the forum and paste it directly into your custom js section. Maybe Nintex just couldn't read your code at one point.

Keep us updated!

Cheers

Philipp

Hi Philipp

Thanks for your respond. I know about the problem, but this code couldn't solve my problem. But following code solve my problem very well

// On Load
NWF.FormFiller.Events.RegisterAfterReady(function(){

NWF$(".numsep input").on( "keyup", function( event ) {


// When user select text in the document, also abort.
var selection = window.getSelection().toString();
if ( selection !== '' ) {
return;
}

// When the arrow keys are pressed, abort.
if ( NWF$.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) {
return;
}


var $this = NWF$( this );

// Get the value.
var input = $this.val();

var input = input.replace(/[Ds._-]+/g, "");
input = input ? parseInt( input, 10 ) : 0;

$this.val( function() {
return ( input === 0 ) ? "" : input.toLocaleString( "en-US" );
} );
} );

});

Regards

Amir

Dear Philipp,

This script is not working in the form. It has no effect on the Currency column. Can you tell me what am I missing please? Below are the screenshots of my form's settings. 

Hi ashmsport‌, have you managed to get this resolved? 

I'm trying the same solution and tried to place "Numbers" in the "Control CSS Class" and "CSS Class" none of them is working!

I also tried Amir Darajeh‌'s code and didn't work either. I'm trying on the preview and published mode. Is that code expected to work while the user is inserting the numeric value in edit mode? does it work on text fields?!  

Hi Christine,

No it does not work, I too tried everything you mentioned. I've left it the way it is for now until Philipp/Amir respond or someone else posts a working script.