Skip to main content
Nintex Community Menu Bar
Solved

Count characters from textbox and display number in real time

  • August 16, 2019
  • 7 replies
  • 328 views
  • Translate

Forum|alt.badge.img+6

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.

Best answer by SimonMuntz

Hi,

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

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

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.

 

 

View original
Did this topic help you find an answer to your question?

7 replies

SimonMuntz
Nintex Employee
Forum|alt.badge.img+22
  • Nintex Employee
  • 2451 replies
  • August 19, 2019

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);
});
});

 

Sample form attached.

Translate

Forum|alt.badge.img+6
  • Author
  • 48 replies
  • August 19, 2019

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)?

Translate

SimonMuntz
Nintex Employee
Forum|alt.badge.img+22
  • Nintex Employee
  • 2451 replies
  • Answer
  • August 21, 2019

Hi,

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

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

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.

 

 

Translate

Forum|alt.badge.img+6
  • Author
  • 48 replies
  • August 21, 2019

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

Translate

Forum|alt.badge.img+1

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!)

Translate

Forum|alt.badge.img+6
  • Author
  • 48 replies
  • August 21, 2019

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. 

Translate

SimonMuntz
Nintex Employee
Forum|alt.badge.img+22
  • Nintex Employee
  • 2451 replies
  • August 21, 2019

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");
}
});
});
Translate

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings