AJAX

simple Javascript counting function

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Jan 2008

Posts: 62

Reputation: hooray is an unknown quantity at this point

Solved Threads: 6

hooray

Offline

Junior Poster in Training

simple Javascript counting function

Feb 20th, 2008

Hi, i have a form on my website, and I would like to have a text box next to another text box that displays how many letters the user can type into the box eg:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<td><input type="text" name="description" maxlength="30" /></td>
<td><input type="text" class="counter" value="30" disabled="true" /></td>
<td><input type="text" name="description" maxlength="30" /></td>
<td><input type="text" class="counter" value="30" disabled="true" /></td>

This is fine, but I would like the box with the numbers in it to count down as the user types in the first box, and if they delete something i would like the number to go back up again too.

If anyone could help me that'd be great thanks.

•

Join Date: Jan 2008

Posts: 483

Reputation: DangerDev has a spectacular aura about

Solved Threads: 59

DangerDev

Offline

Posting Pro in Training

Re: simple Javascript counting function

Feb 20th, 2008

use onkeydown event in text box,
in this event write a function which will take value of textbox check the length of string and then print the no. in the box......

Freedom in the Mind, Faith in the words.. Pride in our Souls...
Indian Developer
http://falaque.wordpress.com/

•

Join Date: Jul 2005

Posts: 154

Reputation: katarey is an unknown quantity at this point

Solved Threads: 20

katarey

Offline

Junior Poster

Re: simple Javascript counting function

Feb 20th, 2008

Hi There,

Try This Code

JavaScript:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script type="text/javascript">
function valueChange(){
		textBox1 = document.getElementById('textBox1');
		description = document.getElementById('description');
		textBox1.value = description.value.length;
}
</script>
<script type="text/javascript">
function valueChange(){
		textBox1 = document.getElementById('textBox1');
		description = document.getElementById('description');
		textBox1.value = description.value.length;
}
</script>

HTML:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<input type="text" name="description" maxlength="30" id="description" onkeyup="valueChange()" /></td>
<input type="text" class="counter" readonly="readonly" id="textBox1" />
<input type="text" name="description" maxlength="30" id="description" onkeyup="valueChange()" /></td>
<input type="text" class="counter" readonly="readonly" id="textBox1" />