How do I add ability to count characters in textarea using this code(php, javascript)?

ok I have made the changes to the function, but it's not working, not counting down.  

here is what I added/changed:
<td><?=inputOrText($mode,"textarea",$A['Q_9'],array("name"=>"Q_9","class"=>"regular","rows"=>"4","cols"=>"70", 'onchange' => 'check_length(this.form)'))?>
            <br><input size=1 value=50 name=text_num> Characters Left</td>

=================The Function==================
<script language=JavaScript>
<!--
function check_length(my_form)
{
    var f = document.forms.ChareForm;
maxLen = 50; // max number of characters allowed
if (f.Q_9.value.length >= maxLen) {
// Alert message if maximum limit is reached.
// If required Alert can be removed.
var msg = "You have reached your maximum limit of characters allowed";
alert(msg);
// Reached the Maximum length so trim the textarea
f.Q_9.value = f.Q_9.value.substring(0, maxLen);
}
else{ // Maximum length not reached so update the value of my_text counter
f.Q_9.value = maxLen - f.Q_9.value.length;}
}
//-->
</script>

suggestion: take a look at PPK's book & website:

http://www.quirksmode.org/dom/maxlength.html

What is the output from the php at this stage?

it displays the textarea and the text box containing the character max, but when i type in the text box
the character number does not decrease.

What happens when you focus to another field? Does something happen?

Can you do view source and see if the onchange is added to the html?

ok Roonaan:
i knew i'd messed up something in my script.  I went back over it made the following changes.  now the problem is, the character count does change, but the numbers are not counting down, but up and they are get larger and larger even after i have deleted all the characters trying to start over.

<script language=JavaScript>
<!--
function check_length(my_form)
{
maxLen = 50; // max number of characters allowed
var f = document.forms.intake;
if (my_form.Q_9.value.length >= maxLen) {
// Alert message if maximum limit is reached.
// If required Alert can be removed.
var msg = "You have reached your maximum limit of characters allowed";
alert(msg);
// Reached the Maximum length so trim the textarea
my_form.Q_9.value = my_form.Q_9.value.substring(0, maxLen);
}
else{ // Maximum length not reached so update the value of my_text counter
my_form.text_num.value = maxLen - my_form.Q_9.value.length;}
}
//-->
</script>

ok Roonaan:

i think we've got it.  I changed your onChange to onkeypress and it seems to work, one question:
in the code i found they have this:

onKeyPress=check_length(this.form); onKeyDown=check_length(this.form);

I am not using the onKeyDown, should I include it?

There is nothing in the code that should explain the behavior you describe.

I cannot even rewrite the code to do something else at this stage.

I did the ususal and closed the browser and reopened.  It seems to be fine now.

one last question.  If i need two or three of these on a page.  What do I need to change?

You can include the onKeyDown as well, it doesn't break anything, so if it adds something its worth adding.

I would use something like:


<script language=JavaScript>
<!--
function check_length_for_field(my_field, my_label)
{
maxLen = 50; // max number of characters allowed
if (my_field.value.length >= maxLen) {
var msg = "You have reached your maximum limit of characters allowed";
alert(msg);
// Reached the Maximum length so trim the textarea
my_field.value = my_field.value.substring(0, maxLen);
}
my_label.value = maxLen - my_field.value.length;}
//-->
</script>

Then use
"onkeypress" => 'check_length_for_field(this, this.form.text_num_1)
"onkeypress" => 'check_length_for_field(this, this.form.text_num_2)
"onkeypress" => 'check_length_for_field(this, this.form.text_num_3)

Wherer the text_num_## is a input field you add per textarea. So textarea Q9 has text_num_Q9 etc.

Ok, will do, Thanks so much.  You are a complete Genius!!!!!!!!!!!!!!!!!!!!!!!

Pure Genius