how to get the value of a textarea in jquery?

i have this form and im trying to get the value from the text area. for some reason it doesn’t want to.

<form action="/profile/index/sendmessage" method="post" enctype="application/x-www-form-urlencoded">
    <div class="upload_form">
        <dt id="message-label"><label class="optional" for="message">Enter Message</label></dt>
        <dd id="message-element">
        <textarea cols="60" rows="5" id="message" name="message"></textarea></dd>
        <dt id="id-label">&nbsp;</dt>
        <dd id="id-element">
        <input type="hidden" id="id" value="145198" name="id"></dd>
        <dt id="send_message-label">&nbsp;</dt>
        <dd id="send_message-element">
        <input type="submit" class="sendamessage" value="Send" id="send_message" name="send_message"></dd>

$("input.sendamessage").click(function(event) {

    var message = $('textarea#message').html();
    var id      = $('input#id').val();

    console.log(message + '-' + id);

or jsfiddle

any ideas?

14 thoughts on “how to get the value of a textarea in jquery?”

  1. You should check the textarea is null before you use val() otherwise, you will get undefined error.

    if ($('textarea#message') != undefined) {
       var message = $('textarea#message').val();

    Then, you could do whatever with message.

  2. $('textarea#message') cannot be undefined (if by $ you mean jQuery of course).

    $('textarea#message') may be of length 0 and then $('textarea#message').val() would be empty that’s all

  3. You don’t need to use textarea#message

    var message = $('textarea#message').val();

    You can directly use

    var message = $('#message').val();
  4. You don’t need to use .html(). You should go with .val().

    From the doc of .val():

    The .val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.

    var message = $('#message').val();

Leave a Comment