I alway do it like this:

$(document).ready(function(){ var maxChars = $("#sessionNum"); var max_length = maxChars.attr('maxlength'); if (max_length > 0) { maxChars.on('keyup', function(e){ length = new Number(maxChars.val().length); counter = max_length-length; $("#sessionNum_counter").text(counter); }); } }); 

Input:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text"> Number of chars: <span id="sessionNum_counter">5</span> 

I always do it like this:

$(document).ready(function() { var maxChars = $("#sessionNum"); var max_length = maxChars.attr('maxlength'); if (max_length > 0) { maxChars.on('keyup', function(e) { length = new Number(maxChars.val().length); counter = max_length - length; $("#sessionNum_counter").text(counter); }); } }); 

Input:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text"> Number of chars: <span id="sessionNum_counter">5</span> 

I alway do it like this:

$(document).ready(function(){ var maxChars = $("#sessionNum"); var max_length = maxChars.attr('maxlength'); if (max_length > 0) { maxChars.bind('keyup', function(e){ length = new Number(maxChars.val().length); counter = max_length-length; $("#sessionNum_counter").text(counter); }); } }); 

Input:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text"> Number of chars: <span id="sessionNum_counter">5</span> 

I alway do it like this:

$(document).ready(function(){ var maxChars = $("#sessionNum"); var max_length = maxChars.attr('maxlength'); if (max_length > 0) { maxChars.on('keyup', function(e){ length = new Number(maxChars.val().length); counter = max_length-length; $("#sessionNum_counter").text(counter); }); } }); 

Input:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text"> Number of chars: <span id="sessionNum_counter">5</span>