Solved

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

Posted on 2008-06-16
14
771 Views
Last Modified: 2013-12-13
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

0
Comment
Question by:justmelat
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
14 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 500 total points
ID: 21794763
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
 
LVL 1

Author Comment

by:justmelat
ID: 21794885
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 21794945
suggestion: take a look at PPK's book & website:

http://www.quirksmode.org/dom/maxlength.html
0
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 
LVL 49

Expert Comment

by:Roonaan
ID: 21794971
What is the output from the php at this stage?
0
 
LVL 1

Author Comment

by:justmelat
ID: 21794992
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 21795059
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
 
LVL 1

Author Comment

by:justmelat
ID: 21795073
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
 
LVL 1

Author Comment

by:justmelat
ID: 21795116
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 21795121
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
 
LVL 1

Author Comment

by:justmelat
ID: 21795139
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 21795140
You can include the onKeyDown as well, it doesn't break anything, so if it adds something its worth adding.
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 21795169
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
 
LVL 1

Author Comment

by:justmelat
ID: 21795198
Ok, will do, Thanks so much.  You are a complete Genius!!!!!!!!!!!!!!!!!!!!!!!
0
 
LVL 1

Author Closing Comment

by:justmelat
ID: 31467666
Pure Genius
0

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
It’s a strangely common occurrence that when you send someone their login details for a system, they can’t get in. This article will help you understand why it happens, and what you can do about it.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question