Form Field Progress Bar - Tested in IE7.0, Netscape8.1.2, Opera9.10, Firefox2.0.0.3 and AOL Explorer1.5

T his script allows you to restrict the number of characters inside a form element (ie: textarea) while displaying a progress bar on the remaining characters beneath it.

We have tested the code in IE7.0, Firefox2.0.0.3, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. 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 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> section ( two parts - style sheet is for cosmetic reconfigurations and other part has no reconfigurations) and <BODY> section (incorporated into a working form) of your document. This section is where you will reconfigure the number value for how many characters you want to allow.

The reconfigurations within the <HEAD> section is for the color of the text and progress bar under the textarea form. See below where and howto:

Default

Our Reconfigurations

Define Reconfigurations

height: 14px; How high from top to bottom the progress is.
color: black; This refers to the color of the text inside the progress bar. It can ge either words or HEX code.
font-size: 14px; This denotes how tall from top to bottom the font will be.
background-color: navy; This denotes the color of the progress bar itself.

The <BODY> section of code is what you will be incorporating into a valid form. To change the number of characters allowed in this form (four places) and/or to change the size of the textarea, see below where and howto.

<form>
<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',30)"
onKeyUp="textCounter(this,'progressbar1',30)"
onFocus="textCounter(this,'progressbar1',30)" ></textarea><br />

<div id="progressbar1" class="progress"></div>
<input type="reset" value="Reset">
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",30)</script>
</form>

Define Cols and Rows

rows="5" This denotes how high from top to bottom the textarea will be
cols="40" This denotes how wide from side to side the textarea will be

Little Extra Not Included In The Script: Since most forms are bloated with code, it may be a good idea to make the <HEAD> javascript section (not style sheet -there is another code for that) into an external.js file.

The <HEAD> section of code starts and ends with opening and closing JavaScript tags, See below:

Opens With:
<script type="text/JavaScript">

<HEAD> Section of code goes here
Closes With:

</script>

Remove the opening and closing Javascript tags.

Copy/cut and paste everything in-between into a notepad and save it as formFieldProgressBar.js*

The newly created (Saved As) file will look something like this

Upload the newly created formFieldProgressBar.js into your directory

Paste the below snipplet of code into the <HEAD> section of your document to call formFieldProgressBar.js

<script type="text/javascript" src="formFieldProgressBar.js"></script>

If you have uploaded the formFieldProgressBar.js into a different directory, you will have to change the path of the above to reflect the location.

If changing the path is a little confusing, grab the below link and it is explained in detail.
[ Upload To Different Directory ]

* We named our external.js file formFieldProgressBar.js. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this.

Another Little Extra Not Included In The Script: The last this we shall cover is to make the <HEAD> section of the CSS style sheet into an external.css file and called from an external location. The CSS style sheet in the <HEAD> section starts and ends with opening and closing CSS tags, See below:

Opens With:
<style type="text/css">

<HEAD> Section of CSS code goes here
Closes With:

</script>

Remove the opening and closing CSS Style tags.

Copy/cut and paste everything in-between into a notepad and save it as formFieldProgressBar.css*

The newly created (Saved As) file will look something like this

or this

Upload the newly created formFieldProgressBar.css into your directory

Paste the below snipplet of code into the <HEAD> section of your document to call formFieldProgressBar.css

<link rel="stylesheet" type="text/css" href="formFieldProgressBar.css">

If you have uploaded the formFieldProgressBar.js into a different directory, you will have to change the path of the above to reflect the location.

If changing the path is a little confusing, grab the below link and it is explained in detail.
[ Upload To Different Directory ]

* We named our external.css file formFieldProgressBar.css. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this.

If you would like to see an example of this effect with the use of an external..js and external.css file in the <HEAD> section, grab the below link and you are there.
[ Form Field Progress Bar With External.JS And External.CSS Files ]

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 ]