[Resolved] How do I add a character counter

[Author]

Posts

[Gavin]

I am trying to add character counter to a cred field.

I've successfully added a 10 character restriction to the field using:

// used to limit length of the field
add_filter('cred_form_validate_1731', 'my_version_validation', 10, 2);
function my_version_validation($field_data, $form_data) {
    list($fields,$errors) = $field_data;
  
     if ( 1731 == $form_data['id'] ){
        if (!empty( $fields['wpcf-event-description'] ) && strlen($fields['wpcf-event-description']['value']) > 10) {
            $errors['event-description'] = 'You have exceeded 10 characters';
        }      
    }
  
    return array($fields, $errors);
}

(10 characters just for testing purposes).

I then visited https://toolset.com/forums/topic/add-character-counter-to-post-excerpt-on-cred-form/ but cannot fathom out how to make this work.

A step-by-step would be very helpful.

Thanks. Gavin.

[Christian Cox]

Okay I'll try to help you step by step. I now see you're using a CRED form so I have just made some modifications to my initial instructions.
1. Edit your CRED form. Add this code to the editor area, right after the text input area you want to count:

<div id="chars">10</div>

2. Then just underneath the editor panel there is an attached JS editor. Twirl that open, then paste in the code from the other ticket with a few minor changes:

(function($) {
    $.fn.extend( {
        limiter: function(limit, elem) {
            $(this).on("keyup focus", function() {
                setCount(this, elem);
            });
            function setCount(src, elem) {
                var chars = src.value.length;
                if (chars > limit) {
                    src.value = src.value.substr(0, limit);
                    chars = limit;
                }
                elem.html( limit - chars );
            }
            setCount($(this)[0], elem);
        }
    });
})(jQuery);
 
jQuery(document).on('cred_form_ready', function(){
var elem = jQuery("#chars");
jQuery('textarea[name="post_excerpt"]').limiter(10, elem);
});

3. Finally, modify this part of the code you just pasted in:

jQuery('textarea[name="post_excerpt"]').limiter(10, elem);

The textarea depends on whether your input field is a single line or a multiline or WYSIWYG. If it's a simple single line, you can replace textarea with input.
The post_excerpt part depends on the text input area whose characters you are counting. Typically a custom field created in Types will be named "wpcf-" plus the slug of your field. So if your field slug is "test-text" then you would change "post_excerpt" to "wpcf-test-text".

4. Save your View and check it out on your live site.

Let's try these steps and see how they work for you. Please provide the URL of a site where I can see your changes to help you out if necessary.

[julieP]

Gavin/Christian

Hope you don't mind my joining in briefly. I found this works if you change "wpv-wpcf-test-text" to "wpcf-test-text" 🙂

Is there a way of applying this to more than one field on the same form? I tried this:-

jQuery(document).on('cred_form_ready', function(){
var elem = jQuery("#chars");
jQuery('input[name="post_title"]').limiter(10, elem);
jQuery('textarea[name="wpcf-test-text"]').limiter(10, elem);
jQuery('textarea[name="wpcf-test-text-two"]').limiter(10, elem);
});

but none of the counters then worked. It only works when applied to one field. Any assistance would be greatly appreciated. Thanks

[Christian Cox]

You must create 3 different "elem" elements and initialize the limiter on each one:

jQuery(document).on('cred_form_ready', function(){
var elem = jQuery("#chars");
var elem2 = jQuery("#chars-two");
var elem3 = jQuery("#chars-three");
jQuery('input[name="post_title"]').limiter(10, elem3);
jQuery('textarea[name="wpcf-test-text"]').limiter(10, elem);
jQuery('textarea[name="wpcf-test-text-two"]').limiter(10, elem2);
});

[julieP]

Awesome, Christian - thank you!!!

[Gavin]

Thanks Christian - with JulieP's change of removing 'wpv-' that works perfectly, and also doesn't allow any text above your chosen number. Cheers.

[Christian Cox]

Great, I'll update my answer to reflect that change.