[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Textarea character limit filter

Posted on 2006-06-06
5
Medium Priority
?
1,297 Views
Last Modified: 2008-01-09
Hi,
Just writing a simple code to check the input lenght of the textarea:

<html>
<head>
<script language="javascript">

 function validateForm(area,lng) {
  var extLength;
   if (document.myform.area.value.length > lng)
  {
    extLength=parseInt(document.myform.area.value.length) - lng;
    alert("Only 30 character are allowed for this field. Please remove "+extLength+" characters.");
      document.myform.area.blur();
    return false;
 }
 else return true;
 }

</script>
</head>
<body>
<form name="myform">
 <textarea name="name1"  onblur="return validateForm(this, 30);"  onKeyUp="return validateForm(this,30);" onkeypress="return validateForm(this, 30);"></textarea>
  <textarea name="name2"  onblur="return validateForm(this, 30);"  onKeyUp="return validateForm(this,30);" onkeypress="return validateForm(this, 30);"></textarea>
   <textarea name="name3" onblur="return validateForm(this, 30);"  onKeyUp="return validateForm(this,30);" onkeypress="return validateForm(this, 30);"></textarea>
</form>
</body>
</html>


What is wrong with this code as it does not work?

Thanks

A
0
Comment
Question by:andy7789
  • 2
  • 2
5 Comments
 
LVL 23

Expert Comment

by:basicinstinct
ID: 16840863
Easy - in your code, change all instances of this:

document.myform.area

to this

area
0
 
LVL 23

Accepted Solution

by:
basicinstinct earned 800 total points
ID: 16840872
What I mean is a little something like this:

<html>
<head>
<script language="javascript">

 function validateForm(area,lng) {
  var extLength;
   if (area.value.length > lng)
  {
    extLength=parseInt(area.value.length) - lng;
    alert("Only 30 character are allowed for this field. Please remove "+extLength+" characters.");
     area.blur();
    return false;
 }
 else return true;
 }

</script>
</head>
<body>
<form name="myform">
 <textarea name="name1"  onblur="return validateForm(this, 30);"  onKeyUp="return validateForm(this,30);" onkeypress="return validateForm(this, 30);"></textarea>
  <textarea name="name2"  onblur="return validateForm(this, 30);"  onKeyUp="return validateForm(this,30);" onkeypress="return validateForm(this, 30);"></textarea>
   <textarea name="name3" onblur="return validateForm(this, 30);"  onKeyUp="return validateForm(this,30);" onkeypress="return validateForm(this, 30);"></textarea>
</form>
</body>
</html>
0
 

Author Comment

by:andy7789
ID: 16840908
Yes, it was it.
Just a question - why cannot I use a full address in this function - like document.form etc?
0
 

Author Comment

by:andy7789
ID: 16840941
basicinstinct,

Also, how can I prevent the user to fill the next field before the current fied length is fixed?

Thanks
-A-
0
 
LVL 11

Assisted Solution

by:mvan01
mvan01 earned 200 total points
ID: 16846612
Hi andy,

When you send 'this', in this case, you're essentially sending document.form.name1, or document.form.name2, as objects.  When you say 'document.form.area.blahblah' in your function, you set the code off looking for a form element with the name ... name="area" .  You can use the entire name if that's what you mean.  this passes the object for you ... or the reference to the object, actually.

In answer to your next subsequent question, you might checkout: http://www.felgall.com/jstip20.htm which shows how to limit the field even while the user is typing - that is, it truncates the input.

Peace and joy.  mvan
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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

872 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