Character counter on multiple text area fields

[MOVOX]

I have a multi-page form which has Text Area fields on certain pages. I would like to add a character counter (all with the same character limits) to each of these fields.

I have added the following code to the Custom CSS & JS settings and the character counter only appears below the field with the ID quform-field-2_857. The other 3 fields do not show the character counter.

The code below is also causing conditional logic to break. When I only list one form ID the counter works fine for the selected field and conditional logic also also working fine. I assume that I am entering the “Get text area field” string incorrectly?

Can you please help with this?

jQuery(function ($) {
var $counter = $(‘<div class=”character-counter”>’),
limit = 200;

// Get the textarea field
$(‘.quform-field-2_425’);
$(‘.quform-field-2_534’);
$(‘.quform-field-2_683’);
$(‘.quform-field-2_857’);

// Add the counter after it
.after($counter)

// Bind the counter function on keyup and blur events
.bind(‘keyup blur’, function () {
var length = $(this).val().length;

if (length > limit) {
// The value exceeds the limit, contain it
$(this).val($(this).val().substring(0, limit));
} else {
// Set the counter text
$counter.text(length + ‘/’ + limit + ‘ characters’);
}
})

// Trigger the counter on first load
.blur();
});

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MOVOX]

Thanks Ally, your new code works perfectly when displaying the character counter on multiple text area fields.

[Author]

Posts