How to count words in a textarea field?

Hello Jotform

I have followed the thread and tried to implement the similar thing on my form. Please see the form in below link.

https://form.jotform.me/70581169965468

I want the number of words from the text area "Enter your source text" to appear in the field below "Number words in source text".

I tried follow the advice above, but it did not work on my end.

It would be very nice of you if you are able to advice me on how I can get it to happen.

I also tried to "clone" the forms from your above examples to see how the form looked like, but "permission denied" was the message I got when I tried to import the form.

Looking forward to hearing from you within soon.

Best Regards,

Bjorn

Hi Bjorn,

The workaround presented here: https://www.jotform.com/answers/466451 uses a custom Javascript code, this means that you need to download your form's full source code, embed or host it on your own web page and add the customize script to your form's source code. Here's how you can get your form's source code: https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form. 

You cannot inject Javascript code directly on the form builder so you will need to have your own website where you can place the source code and the custom script. 

You'll also need to get the specific ID attribute of the text area field and the target text box for the count. Here's how I did mine:

1. I cloned your form and I added a simple text box for the counted words, you cannot use the Form Calculation widget as the target of the counted words. 

2. I then copied my form's full source code and pasted it into an HTML file. Here it is https://shots.jotform.com/charlie/custom-script-counting-words/count-words.html. You can test that out. 

3. This is the script of my form: https://github.com/LightDev777/JotForm-Scripts/blob/master/count-words.js. Note that if you are pasting it directly into the HTML file, you need to wrap it with <script></script> You can see the comments on my code on how it works. 

Let us know if that helps. 

Thank you very much I got it to work now.

One more question....

What if I could like to have a character count in addition to the word count, how should I change the script to make it count the number of entered characters rather than the number or words?

Thank you very much in advance for your support.

Best Regards,

Bjorn

You can try something like this for counting characters:

/*This is the script to count the characters in your textarea field

input_21 is the ID of the textarea field

input_49 is the ID of the simple text box

*/

document.getElementById("input_21").addEventListener("keyup", countChar);

function countChar() {

  var s = document.getElementById('input_21').value; 

  s = s.replace(/[\s*]+/, '');

  var reg = /[\s*]+/;

  s = s.split(reg);

  s = s.join('');

  //Get the ID of the simple text box for the counted words/characters

  document.getElementById("input_49").value = s.length;

}

You need to, of course, change the input ID if you're using different ones for the counting characters. Note that in my script it does not count the spaces, line feed or carriage return, it only counts the characters.

You can test that script here: https://shots.jotform.com/charlie/custom-script-counting-words/count-characters.html 

I hope that helps. 

Hi Charlie,

ThankU very much for informing me about the script.

The script will be helpful for me. I will check it out tomorrow. I am sure it will work out for me.

Best Regards,

bjorn

Hello again Charlie,

I have now tested it and can confirm that is works perfectly.

I just have one more question. Suppose I have two text area fields for text entry, let us call them #input21 and #input22.

Then I want the javascript to collect the number (total sum) of characters entered in #input21 and #input22 - and present that in

the simple text box called #input49?

How should I modify the javascript to make this happen?

Looking forward to hearing from you on this.

Thank you very much in advance for your support.

Best Regards,

Bjorn

Hello again Charlie,

I have now tested it and can confirm that is works perfectly.

I just have one more question. Suppose I have two text area fields for text entry, let us call them #input21 and #input22.

Then I want the javascript to collect the number (total sum) of characters entered in #input21 and #input22 - and present that in

the simple text box called #input49?

How should I modify the javascript to make this happen?

Looking forward to hearing from you on this.

Thank you very much in advance for your support.

Best Regards,

Bjorn

You should be able to easily do that by getting the actual length of both the text area field. 

My script already caters for one text area field.

This line:

document.getElementById("input_49").value = s.length;

Simply outputs the character length in input_21 to input_49. You just need to create another listener for input_22 and create a separate variable for it. Something like this:

document.getElementById("input_21").addEventListener("keyup", countChar);

document.getElementById("input_22").addEventListener("keyup", countChar);

function countChar() {

  var t1 = document.getElementById('input_21').value; 

  var t2 = document.getElementById('input_22').value;

  t1 = t1.replace(/[\s*]+/, '');

  t2 = t2.replace(/[\s*]+/, '');

  var reg = /[\s*]+/;

  t1 = t1.split(reg);

  t2 = t2.split(reg);

  t1 = t1.join('');

  t2 = t2.join('');

  //Add up the length of characters in t1 and t2 then output it on a text box which is input_49

  document.getElementById("input_49").value = t1.length + t2.length;

}

Note that I simply changed the variable names to t1 and t2 to refer to text areas 1 and 2. There's a simpler and more efficient way to write this code, though.