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, 1 month 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)

Tagged: Content-submission forms, Toolset Forms

This topic contains 6 replies, has 3 voices.

Last updated by JakubV7709 5 years, 1 month ago.

Assisted by: Shane.

Author

Posts

February 28, 2019 at 1:50 pm #1207642

marcelO-2

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:

$("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');
});

February 28, 2019 at 6:12 pm #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

March 1, 2019 at 10:19 am #1208206

marcelO-2

I entered this code:

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

but nothing happens

March 1, 2019 at 2:25 pm #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

March 2, 2019 at 8:47 am #1208830

marcelO-2

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 );

March 2, 2019 at 8:49 am #1208832

marcelO-2

My issue is resolved now. Thank you!

April 16, 2019 at 7:35 am #1231347

JakubV7709

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.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.