Javascript Character Count

Question

Example here: http://jsfiddle.net/67XDq/1/

I have the following HTML:

<tr id="rq17"> <td class='qnum'>17.</td> <td class='qtext'>Questions? <i>Maximum of 500 characters - <input style="color:red;font-size:12pt;font-style:italic;" readonly type="text" name="q17length" size="3" maxlength="3" value="500"> characters left</i><br/> <textarea onKeyDown="textCounter(document.frmSurvey.q17,document.frmSurvey.q17length,500);" onKeyUp="textCounter(document.frmSurvey.q17,document.frmSurvey.q17length,500)" class="scanwid" name="q17" id="q17" rows="5" cols=""> </textarea> </td> </tr> 

And the following Javascript:

 function textCounter(field,cntfield,maxlimit) { if (field.value.length > maxlimit) // if too long...trim it! field.value = field.value.substring(0, maxlimit); // otherwise, update 'characters left' counter else cntfield.value = maxlimit - field.value.length; } 

For some reason, which I am completely lacking, this does not seem to work properly.

It should limit the number of characters in textarea , as well as the countdown of the number inside the label , but it does neither.

Answer 1

There are two problems in the script

• form element
• script mode was loaded, which means that the window object did not have a textCounter function

see the updated script http://jsfiddle.net/67XDq/7/ , markup:

 <tr id="rq17"> <td class='qnum'>17.</td> <td class='qtext'> Questions? <i>Maximum of 500 characters - <input style="color:red;font-size:12pt;font-style:italic;" readonly="readonly" type="text" id='q17length' name="q17length" size="3" maxlength="3" value="500" /> characters left</i> <br /> <textarea onKeyDown="textCounter(this,'q17length',500);" onKeyUp="textCounter(this,'q17length',500)" class="scanwid" name="q17" id="q17" rows="5" cols=""></textarea> </td> </tr> 

and code

 function textCounter(field, cnt, maxlimit) { var cntfield = document.getElementById(cnt) if (field.value.length > maxlimit) // if too long...trim it! field.value = field.value.substring(0, maxlimit); // otherwise, update 'characters left' counter else cntfield.value = maxlimit - field.value.length; } 

Answer 2

Modify your html to remove all this.

 <tr id="rq17"> <td class='qnum'>17.</td> <td class='qtext'>Questions? <i>Maximum of 500 characters - <input id="charsLeft" style="color:red;font-size:12pt;font-style:italic;" readonly type="text" name="q17length" size="3" maxlength="3" value="500"> characters left</i><br/><textarea class="scanwid" name="q17" id="q17" rows="5" cols="" maxlength="500"></textarea></td> </tr> 

And javascript is like this:

  $("#q17").keyup(function() { $('#charsLeft').val(500 - $(this).val().length); }); 

Here's the script: http://jsfiddle.net/67XDq/11/

Answer 3

see script: http://jsfiddle.net/abhiklpm/67XDq/15/

changed function:

 function textCounter(field, cntfield, maxlimit) { if (document.getElementById(field).value.length > maxlimit) { // if too long...trim it! document.getElementById(field).value = document.getElementById(field).value.substring(0, maxlimit); } // otherwise, update 'characters left' counter else { document.getElementById(cntfield).value = maxlimit - document.getElementById(field).value.length; } } 

also you were missing id id="q17length" in your html

edited: also u did not pass identifiers as a string: textCounter('q17','q17length','500');