CODEWITHSUNDEEP
javascriptjquery
Carol.Kar
Carol.Kar

Reputation: 5215

Get length of text area

I would like to add below my textarea the length of the written text.

For this purpose I have defined a span element to write my characters.

However, I currently get the following error:

Uncaught ReferenceError: len is not defined

Find below my viable example:

$(".form-control.description").keyup(this.countCharacters.bind(this))


function countCharacters() {
  len = $(".form-control.rigDesc").val().length
  $(".remainChar").html("#" + len);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row" align="left">
  <div class="col-7">
    <textarea class="form-control rigDesc" rows="4" id="comment" placeholder="Describe..."></textarea>
    <span class="remainChar"></span>
  </div>
</div>

Any suggestions how to capture the length of the textarea field?

I appreciate your replies!

Upvotes: 1

Views: 410

Answers (2)

intentionally-left-nil
intentionally-left-nil

Reputation: 8336

Your code was binding the keyup to the wrong selector. I have fixed that and also ensured that len is a local and not global variable. See below:

$(".form-control").keyup(this.countCharacters.bind(this))


function countCharacters() {
  var len = $(".form-control.rigDesc").val().length;
  $(".remainChar").html("#" + len);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row" align="left">
  <div class="col-7">
    <textarea class="form-control rigDesc" rows="4" id="comment" placeholder="Describe..."></textarea>
    <span class="remainChar"></span>
  </div>
</div>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30737

You are missing the class description in your textarea as you have used $(".form-control.description") in your keyup event which seeks for the element with class form-control and description so you need to add description class in your textarea. 

$(".form-control.description").keyup(this.countCharacters.bind(this))

function countCharacters() {
  len = $(".form-control.rigDesc").val().length
  $(".remainChar").html("#" + len);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row" align="left">
  <div class="col-7">
    <textarea class="form-control description rigDesc" rows="4" id="comment" placeholder="Describe..."></textarea>
    <span class="remainChar"></span>
  </div>
</div>

For more accuracy and preventing unintentional error you can use $("textarea.form-control.description") to make sure the keyup event is only for textarea with class form-control and description.

$("textarea.form-control.description").keyup(this.countCharacters.bind(this))

function countCharacters() {
  len = $(".form-control.rigDesc").val().length
  $(".remainChar").html("#" + len);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row" align="left">
  <div class="col-7">
    <textarea class="form-control description rigDesc" rows="4" id="comment" placeholder="Describe..."></textarea>
    <span class="remainChar"></span>
  </div>
</div>

Upvotes: 1

Related Questions