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

ok here is  difficult one
i have inherited code that I have to modify

it's a web app using php, mysql.  below are a couple of the labels and textareas that appears
my boss want to add the feature that counts down the number of characters used in the text box.

I found the code that does exactly what I want (attached) but because of the way the original programmer set up his form fields i don't see how to do this.

<tr>
       <!-- Objective -->
  <td><label><?=$Q['Q_9']?></label></td>
  <td><?=inputOrText($mode,"textarea",$A['Q_9'],array("name"=>"Q_9","class"=>"regular","rows"=>"4","cols"=>"70"))?></td>
</tr>
<tr>
       <!-- Goals -->
  <td valign='top'><label><?=$Q['Q_10']?></label></td>
  <td><?=inputOrText($mode,"textarea",$A['Q_10'],array("name"=>"Q_10","class"=>"regular","rows"=>"4","cols"=>"70"))?></td>
</tr>
<tr>
function check_length(my_form)
{
maxLen = 50; // max number of characters allowed
if (my_form.my_text.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.my_text.value = my_form.my_text.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.my_text.value.length;}
}
//-->
</script>
 
</head>
 
<body>
<form name=my_form method=post>
<textarea onKeyPress=check_length(this.form); onKeyDown=check_length(this.form); name=my_text rows=4 cols=30></textarea>
<br> 
<input size=1 value=50 name=text_num> Characters Left
</form>

Open in new window

LVL 1
justmelatAsked:
Who is Participating?
 
RoonaanConnect With a Mentor Commented:
Try:

  <td><?=inputOrText($mode,"textarea",$A['Q_9'],array("name"=>"Q_9","class"=>"regular","rows"=>"4","cols"=>"70", 'onchange' => 'check_length(this.form)'))?></td>
0
 
justmelatAuthor Commented:
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>
0
 
HonorGodSoftware EngineerCommented:
suggestion: take a look at PPK's book & website:

http://www.quirksmode.org/dom/maxlength.html
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
RoonaanCommented:
What is the output from the php at this stage?
0
 
justmelatAuthor Commented:
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.
0
 
RoonaanCommented:
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?
0
 
justmelatAuthor Commented:
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>
0
 
justmelatAuthor Commented:
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?
0
 
RoonaanCommented:
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.
0
 
justmelatAuthor Commented:
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?
0
 
RoonaanCommented:
You can include the onKeyDown as well, it doesn't break anything, so if it adds something its worth adding.
0
 
RoonaanCommented:
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.
0
 
justmelatAuthor Commented:
Ok, will do, Thanks so much.  You are a complete Genius!!!!!!!!!!!!!!!!!!!!!!!
0
 
justmelatAuthor Commented:
Pure Genius
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.