Character counter on multiple text area fields

Home Forums Quform WordPress Character counter on multiple text area fields

This topic is: resolved
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #34295
    MOVOX
    Participant

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

    #34303
    Ally
    Support Staff

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

    #34306
    MOVOX
    Participant

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy