Textarea value count length jquery

Question

I think i'm missing something or have a silly error. I'm trying to get the counter going for textarea & for some reason length of textarea value is always zero. Here is my same code for View:

@Html.TextAreaFor(x => x.Description, new { @maxlength = "4000", @onkeyup = "countChar(this)" })
@Html.Label("", " ", new { @id = "lblcount" })

my corresponding javascript is:

function countChar(val) {
    var max = 4000;
    var len = $("#txtDescription").val().length;
    if (len >= max) {
        $('#lblcount').text(' you have reached the limit');
        $('#lblcount').attr("class", "lblCountRed");
    } else {
        var ch = max - len;
        $('#lblcount').text(ch + ' characters left');
        $('#lblcount').attr("class", "lblCountGreen");
    }
};

The above code always sets label text to "4000 characters left" irrespective of number of characters I type inside textarea.

Where does it say WFRequest_ReqName is the ID of the textarea? Can you post the rendered html too? — mplungjan, Dec 03 '14 at 15:26
The `id` of this element would match the name of the property of the model which in this case is `Description`, not `txtDescription` — Rory McCrossan, Dec 03 '14 at 15:35

PeterKA · Accepted Answer · 2014-12-03T15:58:04.807

I would really NOT advice you to use inline JavaScript but here is what the function should be:

function countChar( elem ) {
    var max = 4000,
        len = elem.value.length,
        lbl = $('#lblcount');
    if(len >= max) {
        lbl.text(' you have reached the limit')
        .addClass("lblCountRed").removeClass('lblCountGreen');
    } else {
        var ch = max - len;
        lbl.text(ch + ' characters left')
        .addClass("lblCountGreen").removeClass('lblCountRed');
    }
}

If you wanted to accomplish this without inline JavaScript, you would:

remove @onkeyup = "countChar(this)"
then use the following code:

-

$(document).ready(function() {
    $("#Description").on('keyup', function() {
        var max = 4000,
            len = this.value.length,
            lbl = $('#lblcount');
        if(len >= max) {
            lbl.text(' you have reached the limit')
            .addClass("lblCountRed").removeClass('lblCountGreen');
        } else {
            var ch = max - len;
            lbl.text(ch + ' characters left')
            .addClass("lblCountGreen").removeClass('lblCountRed');
        }
    });
});

len = $.trim( elem.value ).length; --> this works :) thanks a lot — DAK, Dec 03 '14 at 15:44
Great! Glad you found this helpful. I have removed `$.trim( )` since spaces may be part of the user's text as the user types. `var x=1, y=3, z=50;` is syntactically correct code; it is equivalent to `var x=1; var y=3; var z=50;`. — PeterKA, Dec 03 '14 at 15:49

score 0 · Answer 2 · answered Dec 03 '14 at 15:35

0

You used wrong selector. Your textarea ID is Description but you used txtDescription. You should use

var len = $("#Description").val().length;

instead of

var len = $("#txtDescription").val().length;

answered Dec 03 '14 at 15:35

MH2K9

11,951
7
32
49

Textarea value count length jquery

2 Answers2