Javascript character count
There are two issues in the fiddle
- no form element
- script mode was onload, which means that window object didnt have
textCounter
function
see updated fiddle 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;
}
CHange your html to remove all that onkey stuff
<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 the javascript is this:
$("#q17").keyup(function() {
$('#charsLeft').val(500 - $(this).val().length);
});
Here's a fiddle: http://jsfiddle.net/67XDq/11/