Greyhead.net

Some users can get just a bit long-winded when presented with a text area to type into. When that happens it would be useful to be able to show the number of characters remaining and to block the input of extra characters if the limit is exceeded.

This article is from Chapter 7 “Adding features to your form” of The ChronoForms Book and is included here with permission from Packt Publishing.

Getting ready

We'll use a very simple form created by the Form Wizard with just two elements – a TextArea and a Button. We will need to know the ID of the text area; by default it will be text_0, the same as the element name.

How to do it...

1. Create the form, save it, and view it in your browser.
   

   

2. Notice that although we've labeled the textarea 50 chars max it takes nearly 100 without complaint. In fact you could keep on typing for a long time and the textarea would just scroll down and accept the input.
3. We're going to add some JavaScript to the Form JavaScript box to count the characters:
   

   window.addEvent('load', function() {
     // execute the check after each keystroke
     $('text_0').addEvent('keyup', function() {
       // set the maximum number of characters
       max_chars = 50;
       // get the current value of the input field
       current_value = $('text_0').value;
       // get current character count
       current_length = current_value.length;
       // calculate remaining chars
       remaining_chars = max_chars - current_length;
       // show the remaining characters
       $('counter').innerHTML = remaining_chars;
     });
   });

4. We would want to show the results of our calculation on the form somewhere, so we'll add some extra text to the textarea label:
   

   <label class="cf_label" style="width: 150px;">50 chars max
   <br /><span id='counter'>50</span> chars left</label>

   That span, with id='counter' is where we'll show the characters remaining.

   

   This works very nicely to count the remaining characters. Unfortunately, it does nothing to stop more characters being entered, all that happens is that we quickly show a negative number of characters remaining.

5. We need some actions to block more characters being entered. We could disable the input as we did for the Submit button in an earlier recipe, but this stops the user editing their entry. What we will do is to trim the entry to 50 characters and show a warning.

   We need to add some more script in place of the innerHTML line previously shown:

     // Change color if remaining chars are five or less
     if ( remaining_chars <= 5 ) {
       $('text_0').setStyle('background-color', '#F88');
       $('text_0').value
         = $('text_0').value.substring(0, max_chars-1);
       if ( remaining_chars <= 0 ) {
         remaining_chars = 0;
       }
     } else {
       $('text_0').setStyle('background-color', 'white');
     }
     $('counter').innerHTML = remaining_chars;
   });

   This script does nothing much if there are more than five characters left except to clear any warnings. If there are less than five characters left, it changes the text area background to a reddish color; if there are no characters left it will trim the text to 50 characters preventing anything new being added.

   

6. This is a fairly simple variant of this kind of script, more elaborate versions can show "thermometer" indicators of the characters left in place of the simple count here. And we could have more subtle messages too!

How it works...

The JavaScript runs a little function to count the characters each time a key click is recorded in the textarea. When the count gets near 50, it shows a warning and then acts when the count reaches 50.

This, like the last recipe, is an example of taking a script published on the Internet for free use and modifying it to work with a ChronoForms Form.

There are different styles of laying out both JavaScript and PHP and sometimes fierce debates about where line breaks and spaces should go. We've adopted a style here that is hopefully fairly clear, reasonably compact, and more or less the same for both JavaScript and PHP. If it's not the style you are accustomed to, then we're sorry.