CODEWITHSUNDEEP
jquerycounter
Homer_J
Homer_J

Reputation: 3323

jQuery - apply code to multiple textareas

I have the following jQuery code:

(function ($) {
    $.fn.textareaCounter = function (options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var defaults = {
            limit: 100
        };
        var options = $.extend(defaults, options);

        // and the plugin begins
        return this.each(function () {
            var obj, text, wordcount, limited;

            obj = $(this);
            obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. ' + options.limit + ' words</span>');

            obj.keyup(function () {
                text = obj.val();
                if (text === "") {
                    wordcount = 0;
                } else {
                    wordcount = $.trim(text).split(" ").length;
                }
                if (wordcount > options.limit) {
                    $("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
                    limited = $.trim(text).split(" ", options.limit);
                    limited = limited.join(" ");
                    $(this).val(limited);
                } else {
                    $("#counter-text").html((options.limit - wordcount) + ' words left');
                }
            });
        });
    };
})(jQuery);

And then the following:

$("textarea").textareaCounter();

Finally the HTML:

<textarea class="scanwid" name="q100" id="q100" rows="5" ></textarea>
<textarea class="scanwid" name="q101" id="q101" rows="5" ></textarea>
<textarea class="scanwid" name="q102" id="q102" rows="5" ></textarea>

It works fine for one textarea counts the Maximum numbers of words etc. but when I add further textarea on the page. The counter and limiter doesn't work for the other textareas - I know I am missing something very easy but can't figure out what!

How can I ensure that there is a counter for each Textarea?

Upvotes: 0

Views: 318

Answers (4)

Ashish Kasma
Ashish Kasma

Reputation: 3652

please see this demo

I used approach for next element, we can go with different approach also.

(function($){
        $.fn.textareaCounter = function(options) {
            // setting the defaults
            // $("textarea").textareaCounter({ limit: 100 });
            var defaults = {
                limit: 100
            };  
            var options = $.extend(defaults, options);

            // and the plugin begins
            return this.each(function() {
                var obj, text, wordcount, limited;

                obj = $(this);
                obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" class="counter-text">Max. '+options.limit+' words</span>');

                obj.keyup(function() {
                    text = obj.val();
                    if(text === "") {
                        wordcount = 0;
                    } else {
                        wordcount = $.trim(text).split(" ").length;
                    }
                    if(wordcount > options.limit) {
                        $(this).next().html('<span style="color: #DD0000;">0 words left</span>');
                        limited = $.trim(text).split(" ", options.limit);
                        limited = limited.join(" ");
                        $(this).val(limited);
                    } else {
                        $(this).next().html((options.limit - wordcount)+' words left');
                    } 
                });
            });
        };
    })(jQuery);

$("textarea").textareaCounter();

Upvotes: 0

krishwader
krishwader

Reputation: 11381

The reason is because the span which has "Words left.." is selected using an id, which is supposed to be unique. Use a class there and your problems are solved. This : 

obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. ' + options.limit + ' words</span>');

must be (note the change from id to class)

obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" class="counter-text">Max. ' + options.limit + ' words</span>');

And then, when you select it, this :

$("#counter-text")

must become :

$(this).next(".counter-text")

Demo : http://jsfiddle.net/2mweC/

Upvotes: 2

TheAnchorsmith
TheAnchorsmith

Reputation: 108

obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. '+options.limit+' words</span>');

You're adding a span element with a ID counter-text use a class instead. And instead of referring it by 

$("#counter-text")

use: 

obj.next('span.counter-text');

Upvotes: 2

Arnaud Christ
Arnaud Christ

Reputation: 3551

Try

$("textarea").each(function() {
    $(this).textareaCounter();
});

Upvotes: 0

Related Questions