/    Sign up×
Community /Pin to ProfileBookmark

On load character count in textarea

I have a textarea where the user is limited to 480 characters. Javascript counts the key strokes and subtracts from 480 and the # of characters remaining is shown. This data is posted to a second page where the user can either confirm or edit the info. My problem arises on the edit page. In a previous post on this forum, I got a script that again counts the characters in the textarea and subtracts from 480. BUT, if the user edits the paragraph, the counter doesn’t move. I need it to increase the remaining characters if something is erased and decrease the remaining characters if something is added. Here is the code with the fix from the original post –

[code] <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head><title></title>
<script language=”JavaScript”>
<!–
function Left(message,count){

document.getElementById(count).value=480-document.getElementById(message).value.length;
}
–>
</script>
</head>
<body onLoad=”Left(‘message’,’count’)”;>

<textarea id=”message” name=”message” wrap=”hard” cols=70
rows=10 width=”120″ onKeyDown=”textCounter(this.form.message,this.form.remLen,480);”
onKeyUp=”textCounter(this.form.message,this.form.remLen,480);”><?php $message = ltrim($message); print stripslashes($message); ?></textarea>
<br><br>
You have &nbsp;<input readonly id=”count” type=text name=remLen size=3 maxlength=3 value=”480″> &nbsp;characters left

[/code]

In a second post (yes, this is my third) I received the following code suggestion –

[code] function txtshow( text2show) {

if (document.getElementById) {
var viewer = document.getElementById(“txtmsg”);
viewer.innerHTML=text2show;
}
else if(document.all) {
document.all[“txtmsg”].innerHTML=text2show;
}
}
[/code]

Due to my ignorance of Javascript, I wasn’t sure what to do with this. I substituted ‘message’ for ‘txtmsg’ an ‘count’ for ‘text2show’ and then I switched them around. I used the txtshow(‘message’) in the body tag and I used txtshow(‘count’) in the body tag. The edit page started showing that there were 480 characters left and never budged.

I would greatly appreciate it if you would take pity on me and tell me exactly what I’m supposed to do with this script (be kind). Thanks loads!

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@phpnoviceJul 04.2006 — ... if the user edits the paragraph, the counter doesn't move. I need it to increase the remaining characters if something is erased and decrease the remaining characters if something is added. Here is the code with the fix from the original post -

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;&lt;title&gt;&lt;/title&gt;
&lt;script language="JavaScript"&gt;
&lt;!--
function Left(message,count){

document.getElementById(count).value=480-document.getElementById(message).value.length;
}
--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad="Left('message','count')";&gt;


&lt;textarea id="message" name="message" wrap="hard" cols=70
rows=10 width="120" onKeyDown="textCounter(this.form.message,this.form.remLen,480);"
onKeyUp="[COLOR=Red]textCounter[/COLOR](this.[COLOR=Red]form[/COLOR].message,this.[COLOR=Red]form[/COLOR].remLen,480);"&gt;&lt;?php $message = ltrim($message); print stripslashes($message); ?&gt;&lt;/textarea&gt;
&lt;br&gt;&lt;br&gt;
You have &amp;nbsp;&lt;input readonly id="count" type=text name=remLen size=3 maxlength=3 value="480"&gt; &amp;nbsp;characters left

[/QUOTE]

That posted code won't work because you're attempting to reference a FORM that is not present. If you had explicitly checked for error messages then you would have seen this problem.
×

Success!

Help @conetrader spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...