Counter Demo

Text Input Field:

( form will not submit )


Simple Counter with one field...
To get this counter to work, you must remove ALL < WEBOT > code from Frontpage and use manual validation.

1.
Set form name - in red < myForm >
2. Set input field name - in green < ProgName >
3. Add Code to text input field tag - in blue < onKeyDown > and < onKeyup >
4. Add readonly input field next to text input field - in blue < onKeyDown > and < onKeyup >
5. Can put counter on more than one field, but must name counter name <
remLen1 > for each.
6. Set the correct character length - in black < 20 >
7. Set the correct display length - in black < 2 >
8. Counter will count down and stop at zero ( user will not be able to add anymore characters )


Simple Code with one field...

<form name="myForm" action="" method="POST">
<b>Counter Demo</b></p>
<p>Input Field:<br>
<textarea rows="2" name="ProgName" cols="50" tabindex="2"
onKeyDown="textCounter(document.myForm.ProgName,document.myForm.remLen1,20)"
onKeyUp="textCounter(document.myForm.ProgName,document.myForm.remLen1,20)"></textarea>
</font>
<input readonly type="text" name="remLen1" size="4" maxlength="2" value="20">
</p>
<p><input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2"> ( form will not submit )</p>
</form>


Function in Head Code...

<!-- Javascript Function: Start -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Dynamic Version by: Nannette Thacker -->
<!-- http://www.shiningstar.net -->
<!-- Original by : Ronnie T. Moore -->
<!-- Web Site: The JavaScript Source -->
<!-- Use one function for multiple text areas on a page -->
<!-- Limit the number of characters per textarea -->
<!-- Begin
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
// End -->
</script>
<!-- Javascript Function: End -->