I am currently able to get a live update on the remaining characters allowed while a user types inside an input field. This post here helped a lot:https://toolset.com/forums/topic/limit-character-in-custom-field/
I have also modified the code to hide the counter wheneven the user click outside the field which is pretty cool.
My issue is that I have a few fields that I want to implement this functionality. Is there a way of optimizing the javascript code instead of just copying and pasting the same code and changing the various classes, etc?
At the moment I am using the following code for one field:
(function($) {
$.fn.extend( {
limiter: function(limit, elem) {
$(".counter").hide();
$(this).on("keyup focus", function() {
$(".counter").show();
setCount(this, elem);
});
$(this).on("blur", function() {
$(".counter").hide();
});
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 );
remainder = limit - chars;
$(".remainder").html(remainder);
}
setCount($(this)[0], elem);
}
});
})(jQuery);
var elem = jQuery("#chars");
jQuery("input[name='post_title']").limiter(10, elem);
where .counter is a class assigned to the paragraph the shows the counter and 'post-title' is the name of the custom field.
Minesh
Supporter
Languages:
English (English )
Timezone:
Asia/Kolkata (GMT+05:30)
Hello. Thank you for contacting the Toolset support.
As I understand you want to show character counter with each of your custom field. If this is correct you can use counter <div> for each of your custom field that displays that remaining counter.
The code looks Ok but to make is dynamic as per your requirement that should work with multiple custom fields, could you please show me your HTML as well. How your custom fields are looks like and in what manner you want to show counter. To which fields you want to apply counter etc..etc..
As soon as you provide me information, this will help me to guide you in right direction.
Hi Minesh, thanks for getting back! Sure no problem, here is the code:
[credform class="cred-form cred-keep-original"]
[cred_field field="form_messages" value=""]
<div class="cred-left">
<div class="cred-field cred-field-post_title">
<label class="cred-label">Event title*</label>
<p class="counter">Characters left: <span class="remainder"></span></p>
[cred_field field="post_title" post="post" value="" placeholder="Enter event title..." urlparam=""]
</div>
<div class="cred-field cred-field-organiser-name">
<label class="cred-label">Organiser name*</label>
[cred_field field="organiser-name" post="post" value="" placeholder="Enter organiser name..." urlparam=""]
</div>
<div class="cred-field cred-field-post_content">
<label class="cred-label">Description*</label>
[cred_field field='post_content' post='post' value='' urlparam='' placeholder='Enter event description...']
</div>
</div>
<div class="cred-right">
<div class="cred-field cred-field-event-type">
<label class="cred-label">Event type*</label>
[cred_field field="event-type" post="post" value="" placeholder="Enter event type (eg: exhibition, conference, festival, clubnight)" urlparam=""]
</div>
<div class="cred-field cred-field-event-location-name">
<label class="cred-label">Event location name*</label>
[cred_field field="event-location-name" post="post" value="" placeholder="Enter event location name..." urlparam=""]
</div>
<div class="cred-field cred-field-event-location-address">
<label class="cred-label">Event location address*</label>
[cred_field field="event-location-address" post="post" value="" placeholder="Enter event location address..." urlparam=""]
</div>
<div class="cred-field cred-field-city">
<label class="cred-label">City*</label>
[cred_field field="city" post="post" value="" placeholder="City the event is taking place..." urlparam=""]
</div>
<div class="cred-field cred-field-country">
<label class="cred-label">Country*</label>
[cred_field field="country" post="post" value="" placeholder="Enter 'Worldwide' for online event..." urlparam=""]
</div>
[cred_field field="form_submit" value="Submit" urlparam=""]
</div>
[/credform]
I have reduced the code to only related fields. On the first filed "post-title", I have added the markup after the label title that is positioned on the right of the label with css:
<p class="counter">Characters left: <span class="remainder"></span></p>
Minesh
Supporter
Languages:
English (English )
Timezone:
Asia/Kolkata (GMT+05:30)
Could you please try to use following dynamic code:
(function($) {
$.fn.extend( {
limiter: function(limit, field) {
$("div.cred-field-"+field p.counter").hide();
$(this).on("keyup focus", function() {
$("div.cred-field-"+field p..counter").show();
setCount(this);
});
$(this).on("blur", function() {
$("div.cred-field-"+field p..counter").hide();
});
function setCount(src) {
var chars = src.value.length;
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], elem);
}
});
})(jQuery);
jQuery("input[name='post_title']").limiter(10, 'post_title');
Lets say if you want to limit another field you just need to add one line of code. For example:
jQuery("input[name='organiser-name']").limiter(10, 'organiser-name');
Where:
No it doesn't work, Minesh, plus you have double dots (p..counter) which I have corrected but still nothing. It doesn't hide the counter and the whole thing doesn't work. Have you actually tried it in your system on a test scenario?
Minesh
Supporter
Languages:
English (English )
Timezone:
Asia/Kolkata (GMT+05:30)
Sorry for the typo. I've corrected a code and its working at this end.
(function($) {
$.fn.extend( {
limiter: function(limit, field) {
$("div.cred-field-"+field+" p.counter").hide();
$(this).on("keyup focus", function() {
$("div.cred-field-"+field+" p.counter").show();
setCount(this);
});
$(this).on("blur", function() {
$("div.cred-field-"+field+" p.counter").hide();
});
function setCount(src) {
var chars = src.value.length;
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], elem);
}
});
})(jQuery);
Please try to call like this:
jQuery(document).ready(function($){
jQuery("input[name='post_title']").limiter(10, 'post_title');
});
Ok I got this code:
(function($) {
$.fn.extend( {
limiter: function(limit, field) {
$("div.cred-field-"+field+" p.counter").hide();
$(this).on("keyup focus", function() {
$("div.cred-field-"+field+" p.counter").show();
setCount(this);
});
$(this).on("blur", function() {
$("div.cred-field-"+field+" p.counter").hide();
});
function setCount(src) {
var chars = src.value.length;
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], elem);
}
});
})(jQuery);
jQuery(document).ready(function($){
jQuery("input[name='post_title']").limiter(10, 'post_title');
jQuery("input[name='organiser-name']").limiter(20, 'organiser-name');
});
but it only works for the first field. The organiser-name field still show the counter and it doesn't work.
Your code was wrong again, Minesh. Apart from the organiser-name field that was a custon field and needed the code:
jQuery("input[name='wpcf-organiser-name']").limiter(20, 'organiser-name');
the code
setCount($(this)[0], elem);
needed to be:
setCount($(this)[0], field);
I am also facing another problem now where I fail to do the same in a textare post_content field with this code not working:
jQuery("textarea[name='post_content']")).limiter(100, 'post_content');
Is there any solution on that?
Can you please be more careful and attentive with the code you provide to me, please? I just spent 2 hours trying to figure out what was wrong with the previous code!
Thanks!
Minesh
Supporter
Languages:
English (English )
Timezone:
Asia/Kolkata (GMT+05:30)
I'm sorry for inconvenience caused. Could you please try following refine code:
(function($) {
$.fn.extend( {
limiter: function(limit, field) {
$("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;
field = field.replace('wpcf-','');
$("div.cred-field-"+field+" span.remainder").html(remainder);
}
setCount($(this)[0],field);
}
});
})(jQuery);
You can call this by:
jQuery(document).ready(function($){
jQuery("input[name='post_title']").limiter(10, 'post_title');
jQuery("textarea[name='wpcf-book-summary']").limiter(25, 'wpcf-book-summary');
});
Please note:
For example: (Types custom field)
jQuery("textarea[name='wpcf-book-summary']").limiter(25, 'wpcf-book-summary');
General post field example:
jQuery("input[name='post_title']").limiter(10, 'post_title');
You should also check field name in page source to confirm the field name.
2)
<p class="counter">Characters left: <span class="remainder"></span></p>
I hope this time all issue will be fixed and you have desired results. Thank you for your patience.
Ok almost done! I had to bring the code:
field = field.replace('wpcf-','');
to the top so the custom fields would also be hidden on blur.
(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_title']").limiter(10, 'post_title');
jQuery("input[name='wpcf-organiser-name']").limiter(20, 'wpcf-organiser-name');
jQuery("textarea[name='post_content']").limiter(100, 'post_content');
jQuery("input[name='wpcf-event-type']").limiter(100, 'wpcf-event-type');
jQuery("input[name='wpcf-event-location-name']").limiter(100, 'wpcf-event-location-name');
jQuery("textarea[name='wpcf-event-location-address']").limiter(100, 'wpcf-event-location-address');
jQuery("input[name='wpcf-city']").limiter(100, 'wpcf-city');
jQuery("input[name='wpcf-country']").limiter(100, 'wpcf-country');
});
The problem is with the post_content field. It's a WYSIWYG field by default and I don't know to to target it. CRED seems to be creating it inside an iframe included in a div with a textarea field following. I tracked the code with Firebug and found the name of the textarea(post_title) but I can't target it. If you drag a post_content field inside a CRED form, you will see what I mean!
Minesh
Supporter
Languages:
English (English )
Timezone:
Asia/Kolkata (GMT+05:30)
Unfortunately the code you have provided earlier is set to support only input and textarea fields. To target WYSWYG editor it will require to write full custom code.
You should refer to the following links for more reference:hidden link http://stackoverflow.com/questions/11342921/limit-the-number-of-character-in-tinymce hidden link hidden link hidden link https://wordpress.org/plugins/limit-post-add-on/
Ok thanks for you support till now!
