Question

I have simple comment form . I put char-counter . When i create new comment all work fine. When i try to edit comment ,char-counter doesnt work.I tried whit Live(), but result is the same. Other Js in edit page is work fine, just this keyup function is die. I tried to put alert to see whether keyup works, but no responce.
Here is my code:

• html

      <?php echo form_tag_for($form, '@comments',array('class' => 'nice'));?>
  
          <?php echo $form->renderHiddenFields() ?>
          <?php echo $form->renderGlobalErrors() ?>
          <?php echo $form['_csrf_token']; ?>
          <input type="hidden" name="comments[users_id]" id="comments_users_id" value="1" />
          <input type="hidden" name="comments[tests_id]" id="comments_users_id" value="<?php echo $testId?>" />
  
  
          <?php echo $form['comment']->renderError() ?>
  
            <div class="count">remaining symbols : 250</div>
            <div class="barbox"><div class="bar"></div></div>
  
          <?php echo $form['comment']->render(array('class' => 'comments_comment')) ?>
  
          <?php  echo $form['captcha']->renderLabel(null,array('class' => 'label-login-down ')) ?>
          <?php echo $form['captcha']->renderError() ?>
          <?php echo $form['captcha']->render(array('class' => 'normal  input-text ' , 'placeholder'=>"Въведете символите")) ?>
  
          <input type="submit" name="addComment" value="Изпрати" />          
      </form> 
  

• jquery

  $(".comments_comment").keyup(function()
  {       
    var box=$(this).val();
    var main = box.length *100;
    var value= (main / 250);
    var count= 250 - box.length;
  
    if(box.length <= 250)
    { 
      if(box.length <=210)
      {
       $('.count').html('remaining symbols : '+count);            
      }
      else
      {          
     $('.count').html('<div class="commentAlertSymbols">remaining symbols :    '+count+'</div>'); 
      }
    $('.bar').animate(
    {
    "width": value+'%',
    }, 1);
  
  }
  else
  {
    $('.count').html('<div class="commentRedSymbols">remaining symbols : '+count+'</div>');
  }
  return false;
  });
  

Answer 1

It would have been nice to see the actual form HTML output instead of all those PHP helper functions, but I’ll give it a shot:

$('.comments_comment').keyup(function() {
    // Get the number of characters, percent used, and number left
    var $count = $('.count');
    var chars = $(this).val().length;
    var percent = (chars / 250) * 100;
    var left = 250 - chars;

    // Update the counter
    $count.html('Remaining Symbols: ' + left);

    // Add classes based on how many are left
    if (chars > 210 && chars <= 250) {
        $count.addClass('commentAlertSymbols');
    } else if (chars > 250) {
        $count.addClass('commentRedSymbols');
    }

    // Animate the bar
    $('.bar').css({
        width: chars <= 250 ? percent + '%' : '100%'
    });
});

I made the code more DRY. Also, I changed the $('.bar').animate line to $('.bar').css, because I didn’t see the point of animating something over one second.

You can see a working JSFiddle at http://jsfiddle.net/KjTrj/.