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
Solved

javascript count characters in an input textbox

Posted on 2010-08-18
5
622 Views
Last Modified: 2012-08-13
this counts characters
in an input textbox

but I want to display the character count next to the textfield
in the form

because I have a large form


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script>
    function changeContent(){
        var txt = document.getElementById('testtext').value;
        document.getElementById('dest').innerHTML = txt;
    }
    function countChars(){
        var len = document.getElementById('testtext').value.length;
        document.getElementById('dest').innerHTML = len;
    }
</script>
</head>
  <body>
    <form name='test' action='test.html' method='post'>
    <input type="text" id="testtext" name="testtext" onkeyup="countChars();">
    </form>
    <table>
    <tr>
    <td id='dest'></td>
    </tr>
    </table>
  </body>
</html>

Open in new window

0
Comment
Question by:rgb192
5 Comments
 
LVL 19

Expert Comment

by:Michael701
ID: 33468731
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 33468921
Check this :

< div>< input type="text" id="testtext" name="testtext" onKeyUp="countChars();">< span id='dest'>< /span>< /div >

page updated :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script>
    function changeContent(){
        var txt = document.getElementById('testtext').value;
        document.getElementById('dest').innerHTML = txt;
    }
    function countChars(){
        var len = document.getElementById('testtext').value.length;
        document.getElementById('dest').innerHTML = " (" + len +")";
    }
</script>
</head>
  <body>
    <form name='test' action='test.html' method='post'>
    <div><input type="text" id="testtext" name="testtext" onKeyUp="countChars();"><span id='dest'></span></div>
    </form>
    <table>
    <tr>
    
    </tr>
    </table>
  </body>
</html>

Open in new window

0
 
LVL 9

Assisted Solution

by:Snarfles
Snarfles earned 250 total points
ID: 33471399
Try this. Tested and working ->http://snarfles.net/code/count.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script>
    function changeContent(len){
        //var txt = document.getElementById('testtext').value;
        document.getElementById('dest').innerHTML = len+" characters";
    }
    function countChars(){
        var len = document.getElementById('testtext').value.length;
        //document.getElementById('dest').innerHTML = len;
	changeContent(len);
    }
</script>
</head>
  <body>
    <form name='test' action='test.html' method='post'>
    <input type="text" id="testtext" name="testtext" onkeyup="countChars();"><span id="dest"></span>
    </form>
    <table>
    <tr>
    <td id='dest'></td>
    </tr>
    </table>
  </body>
</html>

Open in new window

0
 

Author Closing Comment

by:rgb192
ID: 33495876
thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33496043
Thanks for the points!
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery on Submit 4 41
Displaying text in text field when clicking on ajax search result 10 39
Explain this javascript function to me 2 25
PHP 5.6 and 7.x 4 21
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
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 how to dynamically set the form action using jQuery.

856 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