Perform character count on different textarea id

Question

I have several textareas, which the ids are different from each other and I do not want to replicate several jquery to perform on the textarea ids. How can I alter my jquery code to perform on the textareas with different ids?

I have this jquery function now:

var text_max = 2000;
$('#count_message').html(text_max + ' characters left'); 

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

  $('#count_message').html(text_remaining + ' characters left');
});

Here are my HTML codes:

<textarea id="ox_AcitivityForms_YouthActivity__remark" name="ox_AcitivityForms_YouthActivity__remark"</textarea>
<p style="font-size:10pt; text-align:right;" id="count_message"></p>

Please note that the textarea id above is one of the ids that I have. There are a few more eg. ox_AcitivityForms_SportActivity__remark, ox_AcitivityForms_WelfareActivity__remark and so on.

Any clues provided are appreciated.

Check out my answer. Working snippet attached. – Praveen Kumar Purushothaman Nov 23 '17 at 01:53 — Praveen Kumar Purushothaman, Nov 23 '17 at 01:53
I edited my answer with a full example :-) – pirs Nov 24 '17 at 02:00 — pirs, Nov 24 '17 at 02:00

score 0 · Accepted Answer · answered Nov 23 '17 at 01:53

Have a similar class to all the textareas. Perform the function using $.each() and contextual code using $(this):

$(function () {
  var text_max = 2000;
  $(".textarea-div").each(function () {
    $(this).find('.count_message').html(text_max + ' characters left'); 

    $(this).find(".textbox").keyup(function() {
      var text_length = $(this).val().length;
      var text_remaining = text_max - text_length;

      $(this).next('.count_message').html(text_remaining + ' characters left');
    });
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="textarea-div">
  <textarea name="" id="forms_remark_1" cols="30" rows="10" class="textbox"></textarea>
  <div class="count_message"></div>
</div>
<div class="textarea-div">
  <textarea name="" id="forms_remark_2" cols="30" rows="10" class="textbox"></textarea>
  <div class="count_message"></div>
</div>
<div class="textarea-div">
  <textarea name="" id="forms_remark_3" cols="30" rows="10" class="textbox"></textarea>
  <div class="count_message"></div>
</div>
<div class="textarea-div">
  <textarea name="" id="forms_remark_4" cols="30" rows="10" class="textbox"></textarea>
  <div class="count_message"></div>
</div>
<div class="textarea-div">
  <textarea name="" id="forms_remark_5" cols="30" rows="10" class="textbox"></textarea>
  <div class="count_message"></div>
</div>

Thanks alot. It works now after I change '.count_message' to '#count_message'. — Brian Cheong, Nov 23 '17 at 02:04

pirs · Answer 2 · 2017-11-24T01:56:28.413

To be useful and efficient in your code, you should use an automatic function relative to an attribute data-textmax:

    $(function () {
        $('[data-textmax]').each(function(){
            $(this).next('.countbox').html(+$(this).data('textmax') + ' characters left');
            $(this).on('keyup keypress blur change', function() {
                var _this = $(this);
                var textMax = +_this.data('textmax');
                var textLen = _this.val().length;
                var textSub = textMax - textLen;
                var countbox = _this.next('.countbox');
                // optional
                if(textSub <= 0){ 
                    avoidTyping( _this, textMax);
                    textSub = 0;
                    countbox.css('color','red'); // optional color
                }else{
                    countbox.css('color',''); // optional color
                }
                // end optional
                countbox.html(textSub + ' characters left');
                
            });
        }); 
    });

    // optional, keep the max char when textmax is reached 
    function avoidTyping(el, len){
        var str = (el.val()).slice(0, len);
        el.val(str);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea data-textmax="30"></textarea>
<div class="countbox"></div>

<textarea data-textmax="100"></textarea>
<div class="countbox"></div>

<input data-textmax="50" type="text" />
<div class="countbox"></div>

Note: With data-textmax as attribute, you can handle every lengths automatically, on every elements (input, textarea ...), you don't need any wrapper nor a special parent class, just to put an element with the class .countbox next to the textarea or input

Edit: With a function to stop people from writing when data-textmax is reached

Don't forget to accept, do you want a function to avoid typing when its data-textmax is reached ? — pirs, Nov 23 '17 at 02:18
Ok i did it.. but its commented so don't worry, just remove the comments ;-) — pirs, Nov 23 '17 at 03:00

wilsotc · Answer 3 · 2017-11-23T02:47:55.653

This will update a count message input for any textarea containing "whatever". Alter the jQuery wildcard for your pattern. If your textarea id is hello_whatever_blah, name your count input hello_whatever_blah_count and this will work for all textareas that match the wildcard selector and contain "whatever". Demo on codepen: https://codepen.io/wilsotc/pen/POeEdN

var text_max = 2000;
$('#hello_whatever_blah_count').val(text_max + ' characters left'); 

$("input[id*='whatever']" ).on('keyup keypress blur change', function (e) {
  var id_being_updated = e.target.id;
  var text_length = $("#"+id_being_updated).val().length;
  var text_remaining = text_max - text_length;
  $("#"+id_being_updated+"_count").val(text_remaining + ' characters left');
});

Perform character count on different textarea id

3 Answers3

Linked