how to get the value of a textarea in jquery?

Question

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>
    </div>
</form>


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

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

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

or jsfiddle

any ideas?

Enuresis

Answer 1

Value of textarea is also taken with val method:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea cols="60" rows="5" id="message" name="message">
Hello,
 world!
</textarea>

Interpret

Answer 2

You need to use .val() for textarea as it is an element and not a wrapper. Try

$('textarea#message').val()

Updated fiddle

Sudden

Answer 3

you should use val() instead of html()

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

Alcala

Answer 4

in javascript :

document.getElementById("message").value

Deweese

From Mozilla's documentation: "<textarea> does not support the value attribute." – Jovitajovitah

@CristianCiupitu: nobody is talking about the attribute of the textarea element, it's about retrieving the contents of the element. – Legume

@Legume then what does .value mean? – Jovitajovitah

@CristianCiupitu: Like I said, and Saurabh for that matter, it will get you the contents of the textarea element, the text someone typed into the field. If an element (like input) has a value attribute you can retrieve it with document.getElementById("message").getAttribute("value"). – Legume

@Legume just because it works in same cases, doesn't make it right. Or maybe you should report an issue with Mozilla's documentation. – Jovitajovitah

@CristianCiupitu: you are mixing things up. The Mozilla docs state correctly that the value attribute on textarea element is not supported, so you can't do <textarea value="..."></textarea> . This attribute is e.g. for the input element to give it a pre-filled value. .value in JS is something else, it's not to retrieve the value of the value attribute but the contents, so what's between <textarea>...</textarea>. Thus exactly what the OP is asking, but without the need for jQuery. – Legume

@Legume there's the HTML syntax which doesn't have the value attribute and there's also the JavaScript API which has a value attribute. They don't have to be identical. New HTML standards could have some attributes which aren't supported by old JS engines, say blink, and JS engines could for example have computed attributes, say number_of_words which make no sense for the HTML source code. Is this what you're trying to say? – Jovitajovitah

All I'm saying is that the spec you are referring to is for HTML, not JS/DOM. And yes, a HTML attribute is not the same as a JS/DOM property. We are talking about an element's JS/DOM value property here, which is perfectly valid according to the spec: developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement. So you initial comment is true, the textarea HTML element does not have a value HTML attribute, but that does not make Saurabh's answer wrong, because it's a different subject. – Legume

Answer 5

You don't need to use textarea#message

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

You can directly use

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

Document

Answer 6

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.

Episiotomy

This is incorrect. jQuery never returns undefined for any query. Instead, it returns an empty set. However, calling val on an empty set returns an undefined, but your answer does not solve this problem. – Paction

Answer 7

You can directly use

var message = $.trim($("#message").val());

Read more @ Get the Value of TextArea using the jQuery Val () Method

Jijib

Answer 8

You can also get the value by element's name attribute.

var message = $("#formId textarea[name=message]").val();

Technics

Answer 9

$('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

Shirashirah

Answer 10

all Values is always taken with .val().

see the code bellow:

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

Subsequent

Answer 11

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();

Creed

Answer 12

You can also get value by name instead of id like this:

var message = $('textarea:input[name=message]').val();

Bibbye