Skip Navigation

[Resolved] limit number of characters in cred forms input fields – textarea and input

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

Problem:

Limit the number of characters in a single text area and show a countdown next to the text area. It works well. But I also need to limit the amount of characters in few other fields - some text areas and some single line inputs. Any way this is possible?

Solution:

It needs custom JS codes, for example:

https://toolset.com/forums/topic/limit-number-of-characters-in-cred-forms-input-fields-textarea-and-input/#post-1686043

Relevant Documentation:

This support ticket is created 3 years, 9 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 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 3 replies, has 2 voices.

Last updated by michaelR-26 3 years, 9 months ago.

Assisted by: Luo Yang.

Author
Posts
#1685679

I found a solution on this site to limit the number of characters in a single text area and show a countdown next to the text area. It works well. But I also need to limit the amount of characters ina few other fields - some text areas and some single line inputs. Any way this is possible?

You can see it in action here hidden link

Once logged in, go to the front end and cllick the Account Information tab and then on the blue Edit Your Booth button.

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

var elem = jQuery("#chars");
jQuery("textarea[name='wpcf-exhibitor-info-introduction']").limiter(1000, elem);

#1686043
limiter.JPG

Hello,

You can try these:
1) In the field "Exhibitor Address", add below HTML codes:

<b>Characters left:</b><span id="chars2">1000</span>

2) Add below JS codes just below those JS codes you mentioned above:

var elem2 = jQuery("#chars2");
jQuery("textarea[name='wpcf-exhibitor-address']").limiter(1000, elem2);

Since the credentials you provided is not an admin account, I can not test it in your website, but it works fine in my localhost, see screenshot limiter.JPG

#1686857

Thanks. That worked great for the other fields that are textareas, but how can I acheive the same for single line input fields?

#1687631

My issue is resolved now. Thank you!

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