Skip Navigation

[Resolved] Limiting characters in field

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user wanted to limit the amount of characters in their form field.

Solution:

This can be done by using the code in the example below.


jQuery(document).ready(function ($) {
  $('[name^=post_excerpt]').attr('maxlength',280);
});
 
( function( $ ) {
    $( document ).ready( function(){
  
        // insert div to display char count
        $('textarea[name="post_excerpt"]').after("<div class='char-count'>0</div>");
  
        // listen for keyup and update the count
        $('textarea[name="post_excerpt"]').keyup( function(){ 
  
            var chars = $('textarea[name="post_excerpt"]').val().length;
  
            $('.char-count').html( chars );
        });
    });
})( jQuery );

To display the counter you will need to add a p tag to your form with the class "char-count"

This support ticket is created 5 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 6 replies, has 3 voices.

Last updated by JakubV7709 5 years, 10 months ago.

Assisted by: Shane.

Author
Posts
#1207642

I am trying to: Limit characters in a form, for field post_excerpt

Link to a page where the issue can be seen: hidden link

I expected to see: the characters limited

Instead, I got: nothing

Using this code in the JS editor:

(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;
console.log(src);
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_excerpt']").limiter(10, 'post_excerpt');
});

#1207881

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Marcel,

Take a look at this link below.
https://toolset.com/forums/topic/can-i-limit-characters-count-for-my-single-line-text-field-in-cred-forms/

This should be able to assist you with limiting the characters of the field.

Thanks,
Shane

#1208206

I entered this code:

jQuery(document).ready(function ($) {
  $('[name^=post_excerpt]').attr('maxlength',280);
});

but nothing happens

#1208605

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Marcel,

I tested the code directly on the site and it works fine for me.

Would you mind allowing me to have admin access to the page so that I can see why it's not working for you ?

Also did you add the code directly to the js editor of your form?

Please let me know.

Thanks,
Shane

#1208830

Solution working, together with counter:

jQuery(document).ready(function ($) {
  $('[name^=post_excerpt]').attr('maxlength',280);
});

( function( $ ) {
    $( document ).ready( function(){
 
        // insert div to display char count
        $('textarea[name="post_excerpt"]').after("<div class='char-count'>0</div>");
 
        // listen for keyup and update the count
        $('textarea[name="post_excerpt"]').keyup( function(){ 
 
            var chars = $('textarea[name="post_excerpt"]').val().length;
 
            $('.char-count').html( chars );
        });
    });
})( jQuery );
#1208832

My issue is resolved now. Thank you!

#1231347

Hi Shane, could you please describe better, or send code, how to create counter based on this js? I tried to create counter with <p class="char-count"></p>, but it doesnt works :-/
Js works perfectly and it does exactly what i need, but i still miss in my form basic counter.