[Resolved] Javascript word counter not working for CRED edit form

[Author]

Posts

[GeorgeM4735]

I make use of some javascript to count the allowed letters and words when user enters data to some fields inside a CRED form.

(function($) {
    $.fn.extend( {
        limiter: function(limit, field) {
            field = field.replace('wpcf-','');
            $("div.cred-field-"+field+" p.counter").hide();
            $(this).on("keyup focus", function() {
                $("div.cred-field-"+field+" p.counter").show(); 
                setCount(this, field);
              });
            $(this).on("blur", function() {
              $("div.cred-field-"+field+" p.counter").hide();
            });
            function setCount(src,field) {
               var chars = src.value.length;
               if (chars > limit) {
                   src.value = src.value.substr(0, limit);
                   chars = limit;
               }
               remainder = limit - chars;
               
              
              $("div.cred-field-"+field+" span.remainder").html(remainder);
           }
          setCount($(this)[0], field);
           
        }
    });
           
})(jQuery);
 
jQuery(document).ready(function($){
  jQuery("input[name='post_title']").limiter(50, 'post_title');
  jQuery("input[name='wpcf-organiser-name']").limiter(50, 'wpcf-organiser-name');  
  jQuery("textarea[name='post_content']").limiter(500, 'post_content');
  jQuery("input[name='wpcf-event-type']").limiter(50, 'wpcf-event-type'); 
  jQuery("textarea[name='wpcf-event-location']").limiter(150, 'wpcf-event-location');
  jQuery("input[name='wpcf-city']").limiter(100, 'wpcf-city');
});

The script shows the counter information when a particular field is in focus, hides it when not in focus and also updates the counter when the user starts writing. It all works fine while on the create CRED form but when I make use of the CRED edit form to edit the post(have copied the exact same script in the javascript section of the edit form) the only thing that works is the show and hide of the counter information while the field is in focus or not but the counter doesn't seem to be functional(stays blank and doesn't update).

My fields have the following format:

<div class="cred-field cred-field-post_title">
   <label class="cred-label">Event title*</label>
   [cred_field field="post_title" post="viba_portfolio" value="" placeholder="Enter event title..." urlparam=""]
   <p class="counter"><span></span> characters left</p>
</div>

The paragraph with the class "counter" contains the counter.

[GeorgeM4735]

Hi, I am closing the thread as I had an error in my code, it works as expected now!

[Timothy]

Would love to know what the error was, I'm trying to do this myself. Any help?

Tim

[jamesH-10]

I also wanted to get this one working.

I kind of hacked my way through it a bit so I am sure this could be done a little more elegantly. I added the maxlength attribute to the field as well to actually limit the char count of the field.

Markup:

<div class="cred-field cred-field-feature-ad-description">
      	[cred_field field='feature-ad-description' post='act-listing' value='' urlparam='']<p class="counter"><span class="remainder"></span> characters left</p>
      </div>

jQuery:

(function($) {
    $.fn.extend( {
        limiter: function(limit, field) {
            field = field.replace('wpcf-','');
            $("div.cred-field-"+field+" p.counter").hide();
          	var thisField = $("div.cred-field-"+field+" textarea");
            thisField.attr('maxlength',limit);
            thisField.on("keyup focus", function() {
                $("div.cred-field-"+field+" p.counter").show();
                setCount(thisField, field);
              });
            thisField.on("blur", function() {
              $("div.cred-field-"+field+" p.counter").hide();
            });
            function setCount(src,field) {
              var chars = thisField.val().length;
               if (chars > limit) {
                 console.log(thisField.val().length);
                 chars = limit;
                 return false;
               }
          
              var remainder = limit - chars;
              
              console.log(remainder);
                
               
              $("div.cred-field-"+field+" span.remainder").html(remainder);
           }
          setCount($(this)[0], field);
            
        }
    });
            
})(jQuery);
  
jQuery(document).ready(function($){
  jQuery("input[name='feature-ad-description']").limiter(130, 'feature-ad-description');
});

[romanB-3]

Hello,

I've tested this and it works great.

I wonder how I would make the same thing with WORDS instead of CHARS ?

Any help would be greatly appreciated.

Thank you.