Implement Character Count

Store Builder Questions
1

Hi!

I have made a form using form-builder, and I want to change a particular field in a form made with it so that I can display a character count and limit the amount of characters in it, like this fiddle.

I have placed the javascript part in charcount.js in the my_changes folder (followed the how to add custom javascript using mychanges by ecomlabs receipe) with the following code:

$(document).ready(function() {
    var text_max = 99;
    $('#textarea_feedback').html(text_max + ' characters remaining');

$('#textarea').keyup(function() {
    var text_length = $('#elm_82').val().length;
    var text_remaining = text_max - text_length;


    $('#textarea_feedback').html(text_remaining + ' characters remaining');
});



});

However, I need to add an attribute to the field elm_82;

maxlength="1000"

and place a div underneath to display the actual count (i.e. XX characters remaining);

in order to "implement" the feature. However I am struggling to find where and how I can add it, anyone able to give me a hint or point me in the correct direction?

Any help would be greatly appreciated!

Thanks!

2

clarified my question a bit so hopefully it makes better sense now! :)

3

I think you would be better served in this case to NOT use form builder but instead to do an html page with a custom form in it. I'm assuming that your form will not be changed frequently. You would need to add the backend support to store the form data or send an email or whatever you want to do with the data.

But I'm not sure you could (or it wouldn't be worth it to) "bend" form builder to do what you want for only specific fields, especially without modifying distributed code.

You might be able to get it to work for all textarea fields, but you will struggle to get it iin place for a single field on a single page.

What is the page/form you are trying to limit?

4

Here is the template of the Form builder module which displays form fields:

design/themes/YOUR_THEME/templates/addons/form_builder/hooks/pages/page_content.override.tpl

Note that you should also replace "#textarea" with the ID of the corresponding textarea field. E.g.

$('#elm_82').keyup(function() {
5

Thank you both :-)

I got it working now. If anyone wonders, I edited the page_content_override.tpl and replaced the

                {$form_values.$element_id}

with 

                {$form_values.$element_id}

placed a HTML with smarty block above the form with the following code:

Added some custom CSS styling and it now displays the character count for the textarea field elm_82 perfectly.

Only disadvantage with this solution would be if you have several textarea fields as all will be limited to 2500 characters after this mod.