how to display how many left to type in the text box

[mukeshrasm]

Hi

I want to display the number of character to type in a textbox when ever user types a character to the text box using javascript

How can I do that?

[acoder]

Assuming you have something like:

<input type="text" id="textBox" name="textBox" maxlength="50" onkeyup="charCount(this.maxLength);"><span id="charsLeft">50 characters left.</span>

code like this should do the trick:

function charCount(remaining) {
  var textBox = document.getElementById("textBox");
  var spanObj = document.getElementById("charsLeft");
  var charsLeft = remaining - textBox.value.length;
  if (charsLeft <= 0) {
    charsLeft = 0;
    textBox.value = textBox.value.substring(0,remaining);
  }
  spanObj.innerHTML = charsLeft + " characters left.";
}

[mukeshrasm]

Assuming you have something like:

<input type="text" id="textBox" name="textBox" maxlength="50" onkeyup="charCount(this.maxLength);"><span id="charsLeft">50 characters left.</span>

code like this should do the trick:

function charCount(remaining) {
  var textBox = document.getElementById("textBox");
  var spanObj = document.getElementById("charsLeft");
  var charsLeft = remaining - textBox.value.length;
  if (charsLeft <= 0) {
    charsLeft = 0;
    textBox.value = textBox.value.substring(0,remaining);
  }
  spanObj.innerHTML = charsLeft + " characters left.";
}

Thanks

Actually I was doing in this way. This code is working but not as I wanted.

function left()
{
    var maxlen=20;
    var len=document.che.firstname.value.length;
    if(len>maxlen)
    {
        return false;
        exit();
    }
    else
    {
        var str=document.che.firstname.value.length;
        var str=maxlen-str;
        document.write(str+"charaters left");
    }
}

<form name="che">
<input type="text" value="" name="firstname"  onkeyup="left()" />

So now I came to know where I was wrong.

[acoder]

Glad it helped fix it.

Don't use document.write after the page has loaded.

Remember to close your code tags with [/code] otherwise the code won't appear as code.

[mukeshrasm]

Glad it helped fix it.

Don't use document.write after the page has loaded.

Remember to close your code tags with [/code] otherwise the code won't appear as code.

I have three boxes in which I wanted to use this feature so for rest textbox do I need to write the same code or it can be done in one go. if it is then how can I do it.

[acoder]

I have three boxes in which I wanted to use this feature so for rest textbox do I need to write the same code or it can be done in one go. if it is then how can I do it.

You just need to adapt the code to work with all three. If you add an extra parameter to identify the textbox, it should work fine with all three. Post your HTML code if you get stuck.

[mukeshrasm]

You just need to adapt the code to work with all three. If you add an extra parameter to identify the textbox, it should work fine with all three. Post your HTML code if you get stuck.

Here is the HTML code.

//html
<input name="firstname"type="text" id="textBox"  value="" size="20" maxlength="20" /><span id="charsLeft" >20 Characters Left</span>
 
<input name="middlename"type="text" id="textBoxm" value="" size="20" maxlength="20" /><span id="charsLeftm" >20 Characters Left</span>
 
<input name="lastname"type="text" id="textBoxl"  value="" size="20" maxlength="20" /><span id="charsLeftl" >20 Characters Left</span>
 
 

[acoder]

The only changes you need to make are in the first three lines of the function:

function charCount(remaining, id) {
  var textBox = document.getElementById("textBox"+id);
  var spanObj = document.getElementById("charsLeft"+id);

and in the HTML:

<input name="firstname" type="text" id="textBox" value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'')" /><span id="charsLeft" >20 Characters Left</span>
 
<input name="middlename" type="text" id="textBoxm" value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'m')" /><span id="charsLeftm" >20 Characters Left</span>
 
<input name="lastname" type="text" id="textBoxl"  value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'l')" /><span id="charsLeftl" >20 Characters Left</span>

[mukeshrasm]

The only changes you need to make are in the first three lines of the function:

function charCount(remaining, id) {
  var textBox = document.getElementById("textBox"+id);
  var spanObj = document.getElementById("charsLeft"+id);

and in the HTML:

<input name="firstname" type="text" id="textBox" value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'')" /><span id="charsLeft" >20 Characters Left</span>
 
<input name="middlename" type="text" id="textBoxm" value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'m')" /><span id="charsLeftm" >20 Characters Left</span>
 
<input name="lastname" type="text" id="textBoxl"  value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'l')" /><span id="charsLeftl" >20 Characters Left</span>

Thanks

It workes fine as I wanted to do.

[acoder]

You're welcome. Glad to hear that it worked as you wanted.

[mukeshrasm]

You're welcome. Glad to hear that it worked as you wanted.

Hi
I got one more problem but it is with php and gd library it is header allready sent if you want I will show you my code so please reply me back.

[acoder]

Since this is not related to this thread, start a new thread in the correct forum (it's a PHP question?) if you haven't already done so.

[mukeshrasm]

Since this is not related to this thread, start a new thread in the correct forum (it's a PHP question?) if you haven't already done so.

Ok. I have posted it in PHP forum with Title: Cannot modify header information - headers already sent. So please suggest me what to do?

Thanks!