cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
jkweaver
Nintex Newbie

Count characters from textbox and display number in real time

Jump to solution

Hello Nintex community.

 

I have been asked to create a character counter box for sections in which we have a text box (single or multi-line). Would like it to display like a countdown (i.e. number of characters remaining) that is seen like on Twitter or other sites. I have been doing extensive research on the topic and have tried several things that have been offered, but nothing seems to be working. I am not a javascript expert, more of a copy/paster of built code and figuring out how to manipulate parts of code to make it work.

 

I thought about perhaps using a calculated field and can get this to work. However,  it's not a real-time display. It will only show the character count after I have clicked out of a specific text box. 

 

Any thoughts or ideas from the community to help figure out a solution? Thanks in advance.

Labels: (1)
0 Kudos
Reply
7 Replies
Nintex Employee
Nintex Employee

Re: Count characters from textbox and display number in real time

Jump to solution

Hi,

 

I am not great with Javascript either but the following code will count down from 10.

Not sure how to make the typing in the box stop once you get to 0 but its a start. You could put an If statment in that says exceeded or similar when you hit zero.

 

NWF.FormFiller.Events.RegisterAfterReady(function(){

NWF$('#' + slt1).keyup(function(){
var out1 = NWF$('#' + slt1).val();
var out2 = 10;
NWF$('#'+slt2).val(out2 - out1.length);
});
});

Count Down.png

 

Sample form attached.

0 Kudos
Reply
jkweaver
Nintex Newbie

Re: Count characters from textbox and display number in real time

Jump to solution

Thanks for the information. Much appreciated.

 

I am going to assume that in your code, slt1 and slt2 are the names of your text boxes? Where would you normally add this code into the form? And is there code I would need to build to get the box to display the value (in your exmaple the value is 5)?

0 Kudos
Reply
Nintex Employee
Nintex Employee

Re: Count characters from textbox and display number in real time

Jump to solution

Hi,

sl1 and sl2 are the javascript variables configured on the two single lines of text controls.

slt1.png

slt2.png

The code is inserted into the Form settings > custom Javascript section.

formsettings.png

I have added more code so the Error message appears if you exceed 10 characters.

NWF.FormFiller.Events.RegisterAfterReady(function(){
NWF$('#' + slt1).keyup(function(){
var out1 = NWF$('#' + slt1).val();
var out2 = 10;
if ((out2 - out1.length)>=0){
NWF$('#'+slt2).val(out2 - out1.length);
} else {
NWF$('#'+slt2).val("Error");
}
});
});

Import the attached form on my previous post so that you can see how this is put together.

 

 

0 Kudos
Reply
jkweaver
Nintex Newbie

Re: Count characters from textbox and display number in real time

Jump to solution

This is perfect. Got it to work easily. Appreciate the screen shots showing where the javascript variables go and providing additional details.

0 Kudos
Reply
paul_graham
Nintex Newbie

Re: Count characters from textbox and display number in real time

Jump to solution

This works perfectly for a single text (SLT or MLT-Plain Text) column on a form, however if i need to replicate it for multiple columns can you advise the best approach for editing the form java script code (not my area of expertise i am afraid!)

0 Kudos
Reply
jkweaver
Nintex Newbie

Re: Count characters from textbox and display number in real time

Jump to solution

I also had multiple text boxes in my form to add the javascript. And so I copied the javascript code, pasted, and then updated the javascript variables. So for the first box in this example, it has slt1 and slt2 as the variables. So for my second box, I copied the javascript code, pasted, and then updated my second box variables to stl3 and stl4 (keeping consistency). Make sure you also update each textbox with the updated Client ID JavaScript variable name in the Control Settings of the text box. 

0 Kudos
Reply
Nintex Employee
Nintex Employee

Re: Count characters from textbox and display number in real time

Jump to solution

HI,

If you were to continue the same naming of the Client ID JavaScript variable name the next pair of controls would look like this.

NWF.FormFiller.Events.RegisterAfterReady(function(){
NWF$('#' + slt1).keyup(function(){
var out1 = NWF$('#' + slt1).val();
var out2 = 10;
if ((out2 - out1.length)>=0){
NWF$('#'+slt2).val(out2 - out1.length);
} else {
NWF$('#'+slt2).val("Error");
}
});
NWF$('#' + slt3).keyup(function(){
var out1 = NWF$('#' + slt3).val();
var out2 = 10;
if ((out2 - out1.length)>=0){
NWF$('#'+slt4).val(out2 - out1.length);
} else {
NWF$('#'+slt4).val("Error");
}
});
});
0 Kudos
Reply