Search

How to get the value of a textarea in jQuery

post-title

Use the jQuery val() method

You can use the jQuery val() method to get or set the value of a <textarea> element. Be sure to remove any trailing and leading whitespace, otherwise it may cause unexpected results.

The following example will get the value from the textarea and show you in an alert dialog box on click of the button when it is not equal "" (i.e. not empty).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Value from Textarea in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            var comment = $.trim($("#comment").val());
            if(comment != ""){
                // Show alert dialog if value is not blank
                alert(comment);
            }
        });
        
    });
</script>
</head>
<body>
    <textarea id="comment" rows="5" cols="50"></textarea>
    <p><button type="button">Get Value</button></p>
    <p><strong>Note:</strong> Type something in the textarea and click the button to see the result.</p>
</body>
</html>