How do you add a dynamic character count in a text or textarea field

I have a simple text fields with a maximum allowed characters of 120.

I am trying to work out how to display the number of charters available in real-time while the user adds text into the fields.

How do you do this in Wappler without adding an external script, I can figure out how to count the characters but it does not update in real-time.

Similar to the way this works?

https://codepen.io/borisplotkin/pen/RPwXeK

I guess that this is what you are looking for:

image

and

If too difficult to follow, please come back here.

1 Like

Thanks @ben worked like a dream

Most helpful

Cheers!

1 Like

Thanks to Wappler.

My location is Mt Eliza Vic. Is this close to your location?

Hobart Tasmania - so closer than most.

:smile:

I will be the closest to your location, in Carrum Downs, VIC.

1 Like

I have it working on other pages, but can"t get it to work anymore. What have I done wrong here?
wordCount will work though, just Length will not.

20210615_words

The code that you have shown seems to be correct. The only thing that I can think of is that there is another element in your document with an ID of beschrijving

OT: mijn zwager is eigenaar van AquaResort It Soal.

Aha, dus Frank is jouw zwager? Die ken ik dus wel

ID beschrijving is only used for this textarea. It is used for wordcount as well and that works.

Nee, Frank z’n schoonvader Gert Jan is mijn zwager. Frank is dus een aangetrouwde neef.

The other thing I can think of is that it is a bug. Hopefully @Teodor can help out.

I see no issues here:

Screenshot 2021-06-16 at 10.34.49
Screenshot 2021-06-16 at 10.35.00

Just tested with both summernote and a regular textarea.
Are you sure the latest App Connect and Formatter js files are used on your site?

I see no issues either, but fact is: it doesn’t count text.

So:

I am using the latest Wappler (3.9.9) so I assume all files are the latest.
App connect gives an error in the local console:
Formatter length in expression [inp_beschrijving.value.length()] doesn’t exist for type string. dmxAppConnect.js:7
I don’t know what it means, but it could be the cause.
Should I uninstall and reinstall it?

Remove this folder and js file from the local site:

Screenshot 2021-06-16 at 10.50.01

Save you page, these 2 will be re-generated. Upload them to your remote site. Clear the browser cache and try again.

1 Like

And working fine now. Thank you so much Teodor.
Where do I send the flowers? :+1: :pray:

1 Like

I don’t drink flowers, but you can try with a six-pack of beers :smile:
Great to see you got it working now!

2 Likes