Ultimate Character Counter Forms ~ Tested in IE6.0, Netscape8.1, Opera9.01, Firefox1.5.0.6 and AOL Explorer1.2

This script limits the length of multiple form fields and updates the screen as information is entered.

We have tested the code in IE6.0, Firefox1.5.0.6, Opera9.01, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

For your Information: Before we begin, we feel obligated to advise you that the above form(s) are/is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. It also makes use of an external .js script you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external charCount.js file.

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external.js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external charCount.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code
<script type="text/javascript" src="charCount.js">
</script> Traditional Copy/Cut and Paste
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

// End -->
</script>

External .js file

Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

I f you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

T here are no reconfigurations within the <HEAD> section other than to add the opening and closing javascript tags if you opted to use the traditional copy and paste method. The only reconfigurations that can be made are that to the textarea form(s) and or textbox. This covers how many characters allowed and the size of the form itself.

I n this example there are three (3) sections just like the below for each of the form boxes.

<strong>>textarea 1</strong><br>
<textarea name="taMessage" id="taMessage" cols="30" rows="5"
onkeyup="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);" onkeydown="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);" onmouseout="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);"></textarea><br>
<small><span id="charcount">0</span> characters entered. | <span id="remaining">20</span> characters remaining.</small><br></font>

Define Above Areas Of Reconfiguration

<strong>textarea 1</strong><br> - This is just the name for the form. This you can change to anything you want and also remove the <strong> </strong> tags if you prefer.
cols="30" - This denotes how long or wide (side to side) the textara form will be.
rows="5" - This denote how high (top to bottom) the textarea form will be.
'remaining', - This has to do with how many characters remain before it stops allowing characters
20);" - This denotes how many characters that will be allowed.
'charcount' - This has to do with the counting and the how many characters are left.
Notice: There are four(4) of everything except for the cols and rows. They all need to be reconfigured and they all must be the same. In other words, if you want to allow 60 characters, then all four must be configured to say 60.

Note Of Importance: If you study the code there are three (3) separate forms. Each one has a unique name and id. Also pay particular attention to the numbering sequence for the words taMessage, 'charcount', 'remaining'. If you are going to add more than the default, it is imperative the numbering sequence is continued or the entire effect will not function correctly. If this is still a little unclear, view our source code in the <BODY> section (It is very well documented) to see how you have to continue the sequence for adding more than the default of three (3) forms into the code.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]