Home ┬╗ Jquery ┬╗ javascript – Count characters of dynamically created textareas with different id and name attr-Exceptionshub

javascript – Count characters of dynamically created textareas with different id and name attr-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I am having two textareas one under another

<div class="form-group">
<span id="textarea_feedback1"></span>
<span> ­čľŐCharacters left</span>
<br>
<textarea name="answer1" id="answer1" rows="4" placeholder="Type your answer here" areaid="1"></textarea>
<hr>
<span id="textarea_feedback2"></span>
<span> ­čľŐCharacters left</span>
<br>
<textarea name="answer2" id="answer2" rows="4" placeholder="Type your answer here" areaid="2"></textarea>
</div>

Both textareas are created dynamically and they have different id and name attr. At some point, they might be 2, 3, 4… and so on.
What I am trying to do is to create a char counter for each textarea that also applies dynamically.

It would have had been easy if the number of the textareas was fixed (i.e, always 2).

But I am having trouble finding a way to apply one and the same JQuery script to textareas with a different name and id attribute.

I was thinking about adding a unique attribute like areaid="" to each textarea, so I can somehow modify dynamically the script.

This is the script I have

$(document).ready(function() {
var text_max = 400;

$('#textarea_feedback1').html('<span>'+text_max + '</span>');

$('#answer1').on('input click keyup', function() {
    var text_length = $('#answer1').val().length;
    var text_remaining = text_max - text_length;

    $('#textarea_feedback1').html('<span>'+text_remaining + '</span>');
});

});

Basically, what I think that it should happen is, that based on the areaid attr to also change the value of the span id="textarea_feedback" and textatea id="answer" to match the areaid value, so somehow the script would work separately to as many textareas I have.

Here is jsfiddle

How to&Answer:

Wrap that span and the textarea in an element like div so you can access both easily.

;window.onload = function(){
  var text_max = 400;

  for(var tL=document.querySelectorAll('.dummy textarea'), i=0, j=tL.length; i<j; i++){
    $(tL[i]).on('input click keyup', function(){
        var text_length = this.value.length;
        var text_remaining = text_max - text_length;

        this.parentNode.querySelector('span').textContent = text_remaining
    })
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">

<div class = 'dummy'>
<span id="textarea_feedback1"></span>
<span> ­čľŐCharacters left</span>
<br>
<textarea name="answer1" id="answer1" rows="4" placeholder="Type your answer here" areaid="1"></textarea>
</div>

<hr>

<div class = 'dummy'>
<span id="textarea_feedback2"></span>
<span> ­čľŐCharacters left</span>
<br>
<textarea name="answer2" id="answer2" rows="4" placeholder="Type your answer here" areaid="2"></textarea>
</div>
</div>

Answer´╝Ü

You can also not rely on IDs at all, if you do it like this:

$(document).ready(function() {
  var maxLen = 400,
    $formGroup = $(".form-group"),
    $addBtn = $("#add-textarea-btn");

  $addBtn.click(createTextarea);
  // Apply the function on pre-existing textareas
  $("textarea", $formGroup).each(function(i, $el) {
    updateCharCount.call($el);
  });
  // And whenever you edit one
  $formGroup.on("input", "textarea", updateCharCount);

  function createTextarea() {
    $formGroup.append(
      $(
        "<hr />" +
        '<span class="chars-left"></span><span> ­čľŐCharacters left</span>' +
        '<br /><textarea placeholder="Type your answer here"></textarea>'
      )
    );
    updateCharCount.call($("textarea").last());
  }

  function updateCharCount() {
    var $charLeft = $(this).prevAll(".chars-left").first(); // Get previous chars-left
    $charLeft.text(maxLen - $(this).val().length);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="form-group">
  <span class="chars-left"></span><span> ­čľŐCharacters left</span>
  <br />
  <textarea placeholder="Type your answer here">There is some content already</textarea>
</div>
<button id="add-textarea-btn">New textarea</button>