Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2008-06-16
14
Medium Priority
?
781 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 2000 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
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

636 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