Word Count

[ababcock]

I'm looking for a way to show the WORD COUNT, rather than character count, in a text area. I found a script to do it, but it was not Caspio-specific and involved creating another text area. I'm hoping to find a way to do this within Caspio. Any ideas?

[geoffdude]

Try this.

In your form add an HTML Block immediately under the textarea field.

In the HTML block add this code below. Change the name of  "InsertRecordmessage"  to the unique name of your textarea field. Get that name by viewing page source while previewing the form.

Here's the code:

<!-- area counter text appears -->
<div id="writing" style="width:90%; text-align:center; margin:0 auto 15px auto; font-size:11px; font-family:sans-serif; color:#000; padding:0 5%">
Total Word Count: <span id="cnt" style="color:red;">0</span>
</div>

<!-- script to capture keypress within the textarea field - change name of "InsertRecordmessage" if need be -->

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {

document.getElementsByName("InsertRecordmessage")[0].addEventListener("keypress", myFunction);

function myFunction() {
var string = document.getElementsByName("InsertRecordmessage")[0].value;
var wordcount = string.split(/[^\s]+/).length - 1;

document.getElementById("cnt").innerHTML = wordcount;
}
 
});

</script>

Good luck, LMK how it goes.

 

Geoff

[ababcock]

Thank you! This worked on the first field, but when I added an HTML block to count the words in a second field (and updated the field name), it's not working for the second field. The first one still works. Is there a trick to getting it to work twice? Thanks again!

Amanda

[geoffdude]

• Use the same code, but change where it says "myFunction"  to another name .. like "myFunctionB" or similar.  Make sure to change all occurrences of it.

• Also change the ID of the <span> tag to "cntB" and then change that in the script code too, so your counter text goes to the right area.

• Finally - also change the target text area name, as you did earlier, to match what new text area field your targeting... Make sure and change all occurrences of it.

 

LMK if this works.

[ababcock]

That worked; thanks so much for your help! Amanda

[geoffdude]

Show, post,  the code you used for the 2nd counter.

[ababcock]

Sorry, I re-posted the first response initially as my response. Your solution worked, problem solved, thank you!

 

Amanda

[geoffdude]

Great.

 

And, you're very welcome.

 

Best,

Geoff

[Kuroshi]

Hi, I used the code provided above and it is working when I have a text area field. But when I enabled the rich text editor, the code is not working anymore. I tried getting the class and id of the rich text editor but still not working. What class or ID should I get for this code to work on me? Can you help? 

Thanks.

[Barbie]

Hi @Batchini,

I have came up with another solution which can achieve this workflow.
First Add a Virtual Field then call the Text Area which rich text editor is enabled in the Virtual field. Here's a sample screenshot for reference:
You can Hide the Virtual field. Please refer to this screenshot on how to do so:
Lastly, add a Header and Footer. On the Footer paste this code:

<div id="writing" style="width:90%; text-align:center; margin:0 auto 15px auto; font-size:11px; font-family:sans-serif; color:#000; padding:0 5%">
Total Word Count: <span id="cnt" style="color:red;">0</span>
</div>
<script type="text/javascript">
document.getElementsByName("cbParamVirtual1")[0].onchange=function() {
var string = document.getElementsByName("cbParamVirtual1")[0].value;
var wordcount = string.split(/[^\s]+/).length - 1;
document.getElementById("cnt").innerHTML = wordcount;
};
</script>

'cbParamVirtual1' should be changed based on what virtual field you're using.

I hope this works.

Thanks,
Barbie