Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

please see why my jquery textbox event is not working

Posted on 2012-08-19
6
Medium Priority
?
308 Views
Last Modified: 2012-09-14
hi,

please see code below and advise why it is not working:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Jquery test</title>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
            <script type="text/javascript">
                  var maxNum = 100;
                  $('#status').bind( {
                        keypress : function() {
                              var inputText = $(this).val();
                              var numChar = inputText.length;
                              var charRemain = numChar - maxNum;
                              if (numChar <= maxNum) {
                                    $('.counter').text(charRemain);
                              }
                              else if (numChar > maxNum) {
                                    event.preventDefault();
                              }
                        }
                  });
            
            </script>
            
      </head>
<body>
            <textarea cols='50' rows='5' id='status'></textarea>
            <div class='counter'></div>
</body>
</html>
0
Comment
Question by:jecommera
  • 3
  • 2
6 Comments
 
LVL 12

Expert Comment

by:zappafan2k2
ID: 38309950
In general, it would be much more helpful if you give more information that "it is not working."  What is not working?  Is the script not running?  Is it providing the wrong output?  Are you getting an error message?  

That said, I think this line:
var charRemain = numChar - maxNum;
should read
var charRemain = maxNum - numChar;
That is, if by "not working" you meant that it is outputting a negative number.  If that's not what you meant, then please elaborate.
0
 

Author Comment

by:jecommera
ID: 38309960
Sorry - it is supposed to detect the keypress event on the textarea then disable it when you have gone over 100 characters. the event does not appear to be triggering.
0
 

Author Comment

by:jecommera
ID: 38309969
ok - figured out part of the reason it needs document ready however it does not disable the form when I go over the number:

updated code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Jquery test</title>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
            <script type="text/javascript">
                  var maxNum = 100;
                  $(document).ready(function() {
                  $('#status').bind( {
                        keypress : function() {
                              var inputText = $(this).val();
                              var numChar = inputText.length;
                              var charRemain = maxNum - numChar;
                              if (numChar <= maxNum) {
                                    $('.counter').text(charRemain);
                              }
                              else if (numChar > maxNum) {
                                    event.preventDefault();
                              }
                        }
                  });
                  });
            
            </script>
            
      </head>
<body>
            <textarea cols='50' rows='5' id='status'></textarea>
            <div class='counter'></div>
</body>
</html>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 12

Expert Comment

by:zappafan2k2
ID: 38310184
keypress : function() {
should be
 keypress : function(event) {
then it should work.  I created a quick fiddle here:
http://jsfiddle.net/vvs9h/

One quick caveat: this functions the way you want.  However, if the user reaches the maximum characters, they can't use backspace and re-type the message.  You will have to add more logic for that.

There are a number of scripts available for this kind of thing.  Just google "jquery maximum characters textarea."
0
 

Author Comment

by:jecommera
ID: 38311094
thanks for this... can you please advise how adding the 'event' resolved the issue i.e. why it does not work when it is not included.

thanks
0
 
LVL 13

Accepted Solution

by:
JonNorman earned 2000 total points
ID: 38312012
In the function you had event.preventDefault(), the variable event had not been defined.

Just using the keypress function is not likely to be enough for making sure that no more than the max has been entered (e.g. what happens on paste?).

I would suggest that using someone else's hard work is a good idea - Keith Wood has produced a nice jQuery for this exact purpose - http://keith-wood.name/maxlength.html have a look!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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

577 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