How To Get The Value of Textarea Using jQuery, Javascript, Set Maxlength, Width, Height

Textarea Get Value using jQuery or Javascript, Set Char Limit, Set Width and Height


Last week I needed to use a textarea instead of a textbox, or an input control. Very simple indeed to change the html control type, then the problem of capturing the value arose.

Thankfully, there are many forums or articles in the web that addresses exactly this question.

As an aside, we include the setting of width and height, and the maximum number of chars typed in.

Say for example, you have this basic definition:

"<"textarea id="usercomment" name="usercomment" rows="15" cols="100" wrap="soft" maxlength="200" style="overflow: hidden; resize: none; font-family: 'Segoe UI'">""<"/textarea">"

N.B.: Make sure you use id tag, and not just name tag. If you forget the id tag, and you don't get the value, check your definition again. There must be the id tag. And do take note that the double-quote chars  enclosing the opening and closing tags "<" and ">" should not be there at all.

This will create a textarea in your page that is 15px x 100px, and it will accept only until up to 200 chars. Continue typing and it will stop accepting input. If you test the limit by copying and pasting a char set more than 200, only up until the 200th char is shown. Want to test it, go ahead by all means!

Now, to get the value, I basically use jQuery. Here's how it is done:

var userinput = $("#usercomment").val();

If you want to trim the input, this is how it's done:

var userinput = $.trim($("#usercomment").val());

Sometimes you will see examples like this; they also work:

var userinput = $.trim($("textarea#usercomment").val());

Or sometimes, when the rows are created dynamically, as when the rows are created from a dB result set:

var userinput = $('#usercomment').val(); 

/* single quote instead of double quote */

Sometimes you will see some examples or answers in forums, as below:

var userinput = $("#usercomment").value();

/* this will be undefined */

var userinput = $("#usercomment").text();

/* this will give you a '' (empty) value */

Sometimes, the width and height is defined in the css style section this way:

textarea {  width: 200px;  height: 15px;}

This will be most useful when you have many textarea controls in your page.

Now, to get the value using plain vanilla javascript, it is done this way:

var userinput = document.getElementById("usercomment").value;

So there you have it! Now you know:

Textarea Get Value using jQuery or Javascript, Set Char Limit, Set Width and Height

Hopefully this short explanation is of use to you today.


Till then!