Solved

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

Posted on 2008-06-16
14
767 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
  • 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
 
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now