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.

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.

• javascript
• jquery
• asp-mvc-4
• textarea
• counter

Share Improve this question Follow edited Dec 3, 2014 at 15:28 DAK asked Dec 3, 2014 at 15:23 DAKDAK 1,43555 gold badges2424 silver badges3535 bronze badges 2

• Where does it say WFRequest_ReqName is the ID of the textarea? Can you post the rendered html too? – mplungjan Commented Dec 3, 2014 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 Commented Dec 3, 2014 at 15:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 acplish 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');
        }
    });
});

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;