0

I want to implement JQuery Counter Limit for textarea in wordpress comments.php

Note 1: JQuery Counter Limit code itself is working. https://jsfiddle.net/samarpw/5yosLhvo/ .How to implement this JQuery code with comments.php code in Note 2.

Note 2: While my comments.php template is also working fine with my theme. Following is textarea for which above JQuery Counter Limit code should work.

<div id="commentform" class="c-form">
<?php
global $aria_req;
$comments_args = array(
    'title_reply'          =>'<h4><span>'.__('Add Comment', 'MyTheme' ).'</span></h4>',
    'comment_notes_before' => '',
    'comment_notes_after'  => '',
    'label_submit'         => __( 'Post Comment', 'MyTheme' ),
    'comment_field'        => '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" placeholder="'.__('Comment Description *', 'MyTheme' ).'"></textarea></p>',
    'fields'               => apply_filters( 'comment_form_default_fields', 
        array(
            'author' => '<p class="comment-form-author">'
            .( $req ? '' : '' ).'<input id="author" name="author" type="text" aria-required="true" placeholder="'.__('Name *', 'MyTheme' ).'" value="'.esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
            'email'  => '<p class="comment-form-email">'
            .($req ? '' : '' ) . '<input id="email" name="email" type="text" aria-required="true" placeholder="'.__('Email *', 'MyTheme' ).'" value="' . esc_attr(  $commenter['comment_author_email'] ).'" size="30"'.$aria_req.' /></p>',
        ) 
    )
); 
comment_form($comments_args); ?>
</div>

My Implementation Code https://ideone.com/yFIXG3 .Your Guide & help will be appreciated. I will be thankful to you.

  • Is the console saying anything? – D. Dan Jan 26 '18 at 11:12
  • 1
    It is not clear what is the actual question. 1. There is no such thing as "not working" please edit your question and explain what is it that does happen. 2. where is you integration code? – Mark Kaplun Jan 26 '18 at 11:17
  • After </textarea> I placed <script></script> inside '. .'. This is error Parse error: syntax error, unexpected '<' in E:\PZ Works\Xampp\htdocs\wp1\wp-content\themes\fw\comments.php on line 89 – samar Jan 26 '18 at 11:19
  • Updated with My Implementation Code ideone.com/yFIXG3 – samar Jan 26 '18 at 11:26
  • If you want to implement it this way, then you should put the whole <script>...</sctipt> tag between '<script>...</sctipt>' too! – D. Dan Jan 26 '18 at 11:40
1

It appears that you have two errors in your code as posted in the comments (and pasted below).

  1. You've concatenated the script tag in the comment_field array value without encapsulating it as a string (in quotes). Ideally, your declaration of the limiter function should be in tags outside of the markup being passed in the comments_args array being passed to comment_form function. Alternatively, you could load the jquery counter library in your the tag by adding it to your theme's functions.php (using wp_enqueue_script)
  2. Also, you've initialized the "limiter" function on the wrong element ID of "text" instead of "comment" as set in the 'comment-field' array key. I recommend calling it after the document is fully loaded/is ready.

For easier reference, I've copied and pasted the code you shared in the comments (reformatted for better readability) as well as posted the edits likely required:

Your implementation as shared (https://ideone.com/yFIXG3):

<div id="commentform" class="c-box">
  <?php global $aria_req; $comments_args = array(
'title_reply'=>'<h4><span>'.__('Add Comment', 'MyTheme' ).'</span></h4>',
'comment_notes_before' => '',
'comment_notes_after' => '',
'label_submit' => __( 'Post Comment', 'MyTheme' ),
'comment_field' => '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" maxlength="600" placeholder="'.__('Comment Description *', 'MyTheme' ).'"></textarea>'.<script>
(function ($) {
$.fn.extend({
limiter: function (minLimit, maxLimit, elem) {
$(this).on("keydown keyup focus keypress", function (e) {
setCount(this, elem, e);
});
function setCount(src, elem, e) {
var chars = src.value.length;
if (chars == maxLimit) {
//e.preventDefault();
elem.html(maxLimit - chars);
elem.addClass("maxLimit");
return false;
} else if (chars > maxLimit) {
src.value = src.value.substr(0, maxLimit);
chars = maxLimit;
elem.addClass("maxLimit");
} else {
elem.removeClass("maxLimit");
}
if (chars < minLimit) {
elem.addClass("minLimit");
} else {
elem.removeClass("minLimit");
}
elem.html(maxLimit - chars);
}
setCount($(this)[0], elem);
}
});
})(jQuery);
var elem = $("#chars");
$("#text").limiter(35, 200, elem);
</script>.'</p>',
'fields' => apply_filters( 'comment_form_default_fields',
array(
'author' => '<p class="comment-form-author">'
.( $req ? '' : '' ).'<input id="author" name="author" type="text" aria-required="true" maxlength="20" placeholder="'.__('Name *', 'MyTheme' ).'" value="'.esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
'email' => '<p class="comment-form-email">'
.($req ? '' : '' ) . '<input id="email" name="email" type="text" aria-required="true" maxlength="50" placeholder="'.__('Email *', 'MyTheme' ).'" value="' . esc_attr(  $commenter['comment_author_email'] ).'" size="30"'.$aria_req.' /></p>',
'url' => '<p class="comment-form-url"><input id="url" name="url" type="text" placeholder="'.__('Website', 'MyTheme' ).'" value="' . esc_url( $commenter['comment_author_url'] ) . '" size="30" /></p>'
) 
)
); 
comment_form($comments_args); ?>
</div>

Your implementation as shared, but formatted:

<div class="c-box" id="commentform">
    <?php 
        global $aria_req; 
        $comments_args = array(
            'title_reply' =>
                '<h4><span>'.__('Add Comment', 'MyTheme' ).'</span></h4>',
            'comment_notes_before' => 
                '',
            'comment_notes_after' => 
                '',
            'label_submit' => 
                __( 'Post Comment', 'MyTheme' ),
            'comment_field' => 
                '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" maxlength="600" placeholder="'.__('Comment Description *', 'MyTheme' ).'"></textarea>'.
                <script>
                (function($) {
                    $.fn.extend({
                        limiter: function(minLimit, maxLimit, elem) {
                            $(this).on("keydown keyup focus keypress", function(e) {
                                setCount(this, elem, e);
                            });

                            function setCount(src, elem, e) {
                                var chars = src.value.length;
                                if (chars == maxLimit) {
                                    //e.preventDefault();
                                    elem.html(maxLimit - chars);
                                    elem.addClass("maxLimit");
                                    return false;
                                } else if (chars > maxLimit) {
                                    src.value = src.value.substr(0, maxLimit);
                                    chars = maxLimit;
                                    elem.addClass("maxLimit");
                                } else {
                                    elem.removeClass("maxLimit");
                                }
                                if (chars < minLimit) {
                                    elem.addClass("minLimit");
                                } else {
                                    elem.removeClass("minLimit");
                                }
                                elem.html(maxLimit - chars);
                            }
                            setCount($(this)[0], elem);
                        }
                    });
                })(jQuery);
                var elem = $("#chars");
                $("#text").limiter(35, 200, elem);
                </script>
                .'</p>',
            'fields' => 
                apply_filters( 'comment_form_default_fields',
                    array(
                        'author' => 
                            '<p class="comment-form-author">'.( $req ? '' : '' ).'<input id="author" name="author" type="text" aria-required="true" maxlength="20" placeholder="'.__('Name *', 'MyTheme' ).'" value="'.esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
                        'email' => 
                            '<p class="comment-form-email">'.($req ? '' : '' ) . '<input id="email" name="email" type="text" aria-required="true" maxlength="50" placeholder="'.__('Email *', 'MyTheme' ).'" value="' . esc_attr(  $commenter['comment_author_email'] ).'" size="30"'.$aria_req.' /></p>',
                        'url' => 
                            '<p class="comment-form-url"><input id="url" name="url" type="text" placeholder="'.__('Website', 'MyTheme' ).'" value="' . esc_url( $commenter['comment_author_url'] ) . '" size="30" /></p>'
                    ) 
                )
        ); 
        comment_form($comments_args); 
    ?>
</div>

Recommended adjustments:

<div class="c-box" id="commentform">
<?php 
    global $aria_req; 
    $comments_args = array(
        'title_reply' => 
            '<h4><span>'.__('Add Comment', 'MyTheme' ).'</span></h4>',
        'comment_notes_before' => 
            '',
        'comment_notes_after' => 
            '',
        'label_submit' => 
            __( 'Post Comment', 'MyTheme' ),
        'comment_field' => 
            '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" maxlength="600" placeholder="'.__('Comment Description *', 'MyTheme' ).'"></textarea></p>',
        'fields' => 
            apply_filters( 'comment_form_default_fields',
                array(
                'author' =>
                    '<p class="comment-form-author">'.( $req ? '' : '' ).'<input id="author" name="author" type="text" aria-required="true" maxlength="20" placeholder="'.__('Name *', 'MyTheme' ).'" value="'.esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
                'email' => 
                    '<p class="comment-form-email">'.($req ? '' : '' ) . '<input id="email" name="email" type="text" aria-required="true" maxlength="50" placeholder="'.__('Email *', 'MyTheme' ).'" value="' . esc_attr(  $commenter['comment_author_email'] ).'" size="30"'.$aria_req.' /></p>',
                'url' => 
                    '<p class="comment-form-url"><input id="url" name="url" type="text" placeholder="'.__('Website', 'MyTheme' ).'" value="' . esc_url( $commenter['comment_author_url'] ) . '" size="30" /></p>'
                ) 
            )
    ); 
    comment_form($comments_args); 
?>

<script>
(function($) {
    $.fn.extend({
        limiter: function(minLimit, maxLimit, elem) {
            $(this).on("keydown keyup focus keypress", function(e) {
                setCount(this, elem, e);
            });

            function setCount(src, elem, e) {
                var chars = src.value.length;
                if (chars == maxLimit) {
                    //e.preventDefault();
                    elem.html(maxLimit - chars);
                    elem.addClass("maxLimit");
                    return false;
                } else if (chars > maxLimit) {
                    src.value = src.value.substr(0, maxLimit);
                    chars = maxLimit;
                    elem.addClass("maxLimit");
                } else {
                    elem.removeClass("maxLimit");
                }
                if (chars < minLimit) {
                    elem.addClass("minLimit");
                } else {
                    elem.removeClass("minLimit");
                }
                elem.html(maxLimit - chars);
            }
            setCount($(this)[0], elem);
        }
    });
    $(document).ready(function() {
        var elem = $("#chars");
        $("#comment").limiter(35, 200, elem);
    });
})(jQuery);
</script>

</div><!--/#commentform-->
  • 1
    It worked. Love you man. You won my heart. Bundle of thanks with love. You cannot imagine how much time I wasted to find solution. But you solved it. May God bless you & you live long for saving my time. – samar Jan 26 '18 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.