New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

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: Developer's View

Step 1: Add the below script to the <HEAD> section of your page:

Select All

Step 2: Insert the below sample form onto your page, which also demonstrates how to associate the script with your own form:

Select All

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.