Solved

javascript count characters in an input textbox

Posted on 2010-08-18
5
621 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

776 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