0

Jquery to add character countdown for a text area

In a recent form I implemented, I added in jquery to add a character countdown for a text area so that users know how many characters they had left.

The following code works in ClickDimensions version 8.13. Insert it into the javascript box in the Code Editor for the form:

clickd_jquery(document).ready(function(){
var f_aa03a547e1e5e711813c70106fa11a21_maxLength = 160;
clickd_jquery('#f_aa03a547e1e5e711813c70106fa11a21').keyup(function() {
var length = clickd_jquery(this).val().length;
var length = f_aa03a547e1e5e711813c70106fa11a21_maxLength-length;
clickd_jquery('#f_aa03a547e1e5e711813c70106fa11a21_chars').text(length);
});
});

Note: The IDs used in the above code work in my implementation, but you will need to look up the ids in your code before you add the jquery in. This code is also extensible, i.e. if you have multiple textarea countdowns, name them differnently and they won't clash. I've used the ID of the text area to prepend my maxLength and span IDs.

  1. This is the id of the textarea that you want to the countdown for:
    >> clickd_jquery('#f_aa03a547e1e5e711813c70106fa11a21').keyup(function() {
  2. This is the id of the span that has the characters remaining in it that you want to update:
    >> clickd_jquery('#f_aa03a547e1e5e711813c70106fa11a21_chars').text(length);
  3. To get it into your form, you add a HTML form component. The HTML I used is as follows:
    <p style="font-family: Arial; margin-top: 0px;"><span id="f_aa03a547e1e5e711813c70106fa11a21_chars">160</span> characters remaining</p>

Note that the Id of the span element in 2 and 3 are the same. 

I had modified the code from this blog post from Geoff Muskett: http://geoffmuskett.com/really-simple-jquery-character-countdown-in-textarea/

Enjoy.

0 comments

Please sign in to leave a comment.