[Resolved] Limit Characters in Form Fields

[Author]

Posts

[mikeF-8]

This is a repost of https://toolset.com/forums/topic/limit-characters-in-multiple-fields-with-counters/
I didn't mark the post as resolved, not sure how that happened.

The form field is as follows:

<div class="form-group">
		<label>On Site Headline (50 to 72 Characters)</label>
		[cred_field field='post_title' class='form-control' output='bootstrap']<div id="chars">72</div>
	</div>

In the js area i have

(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("textfield[name='post_title']").limiter(72, elem);

For the very last part, I also tried:

var elem = jQuery("#chars");
jQuery("textarea[name='post_title']").limiter(72, elem);

The form is at hidden link

I am not getting any limiting within the field.

Appreciate the help.

[Christian Cox]

Hi, the post title field is probably an input, not a textarea or textfield element. Try this update on the last line:

jQuery("input[name='post_title']").limiter(72, elem);

[mikeF-8]

Hi Christian,

This worked well for single line fields. Thank you. I also have multi-line fields that I'd like to limit and I can't get it to happen.

<div class="form-group">
		<label>Lead (up to 215 characters), the first section of the piece. </label>
		[cred_field field='post-lead-section' force_type='field' class='form-control' output='bootstrap']<div id="chars3">215</div>
	</div>

var elem = jQuery("#chars3");
jQuery("field[name='post-lead-section']").limiter(215, elem); 

In the last line i've tried: field, input, textarea, textfield. No luck. Any insight is appreciated.

[Christian Cox]

A custom field's name attribute will include the "wpcf-" prefix. The multiline field type uses a textarea element, so the code would look like this:

jQuery("textarea[name='wpcf-post-lead-section']").limiter(215, elem); 

Pro tip: Take a look at the screenshot here, an example of a multiline input field in my local test environment. You can use the browser's built-in inspector tools to figure out the element type and name attribute of any input you want to limit.