Form field Progress Bar
Note: Minor improvements to script by Dynamic Drive (Oct 13th, 04').
Description: Similar in function to Form Field Limiter, this 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. Very cool, and works in IE4+, NS6+, and Opera 7+.
Demo: Try typing in the below textarea (limit: 20 characters).
Directions:
Step 1: Add the below script to the <HEAD> section of your page:
Step 2: Insert the below sample form onto your page, which also demonstrates how to associate the script with your own form:
As shown, enabling the script on a particular form element involves modifying it to:
<form>
<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',20)"
onKeyUp="textCounter(this,'progressbar1',20)"
onFocus="textCounter(this,'progressbar1',20)"></textarea><br />
<div id="progressbar1" class="progress"></div>
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",20)</script>
</form>
The part in red represents what needs to be added to the original HTML code to enable the Progress Bar on it. "Progressbar1" should be an arbitrary but unique ID of the corresponding progress bar, and "20", the number of allowed characters. Repeat this for additional form elements, though change all instances of the ID "progressbar1" to something else (ie: "progressbar2") in the 2nd instance.