Solved

Count characters from textbox and display number in real time

  • 16 August 2019
  • 7 replies
  • 217 views
J
Badge +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.

icon

Best answer by SimonMuntz 21 August 2019, 02:37

View original

7 replies

SimonMuntz
Userlevel 6
Badge +22

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.

Cool Nintex courses: https://learn.nintex.com/
J
Badge +6

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

SimonMuntz
Userlevel 6
Badge +22

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.


 


 

Cool Nintex courses: https://learn.nintex.com/
J
Badge +6

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

P
Badge +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!)

J
Badge +6

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. 

SimonMuntz
Userlevel 6
Badge +22

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

}

});

});
Cool Nintex courses: https://learn.nintex.com/

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings