Question

I have several form elements on a page with an attribute of maxlength and want to have a character countdown to alert the user of characters remaining. I thought this would work but each counter span is empty.

Here is a sample of the elements (all the rest are similar in structure):

<label for="homeTagline">Tagline</label>
<input type="text" name="homeTagline" value="IT'S YOUR LIFE!" maxlength="24" class="maxed" />
<br>
<span class='emphasisTxt'><span class='cntr'></span> characters of 24 remaining</span>

and here is my jquery

$('.maxed').each( function(){
   var ml = parseInt( $(this).attr('maxlength') );
   if( $(this).val().length() == 0){
      $(this).sibling('span.cntr').html(ml);
   } else {
      $(this).sibling('span.cntr').html(ml - $(this).val().length() );
   } // end if
});

Answer 1

Is something like this what you’re looking to accomplish?

$('.maxed').each(function(){
   var ml     = parseInt( $(this).attr('maxlength') );
   var length = $(this).val().length;

   $(this).nextAll('span:first').find('.cntr').html(ml-length);      
}).keyup(function() {
    var ml     = parseInt( $(this).attr('maxlength') );
    var length = $(this).val().length;

    $(this).nextAll('span:first').find('.cntr').html(ml - length );
});

Here’s an updated jsFiddle example: http://jsfiddle.net/RtHyX/4/