how to get the value of a textarea in jquery?

JavascriptJqueryTextarea

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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>

Solution 2 - Javascript

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

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

Updated fiddle

Solution 3 - Javascript

you should use val() instead of html()

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

Solution 4 - Javascript

in javascript :

document.getElementById("message").value

Solution 5 - Javascript

You don't need to use textarea#message

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

You can directly use

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

Solution 6 - Javascript

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.

Solution 7 - Javascript

You can directly use

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

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

Solution 8 - Javascript

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

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

Solution 9 - Javascript

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

Solution 10 - Javascript

all Values is always taken with .val().

see the code bellow:

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

Solution 11 - Javascript

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

Solution 12 - Javascript

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

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPatrioticcowView Question on Stackoverflow
Solution 1 - JavascriptVisioNView Answer on Stackoverflow
Solution 2 - JavascriptSelvakumar ArumugamView Answer on Stackoverflow
Solution 3 - JavascriptRamView Answer on Stackoverflow
Solution 4 - JavascriptSaurabh Chandra PatelView Answer on Stackoverflow
Solution 5 - JavascriptSidTechs1View Answer on Stackoverflow
Solution 6 - JavascriptWujiView Answer on Stackoverflow
Solution 7 - Javascriptjonathan klevinView Answer on Stackoverflow
Solution 8 - Javascriptrahim.nagoriView Answer on Stackoverflow
Solution 9 - JavascriptZbyszek SwirskiView Answer on Stackoverflow
Solution 10 - Javascriptمحمد المسلمView Answer on Stackoverflow
Solution 11 - JavascriptJawwad Ali KhanView Answer on Stackoverflow
Solution 12 - JavascriptAjayView Answer on Stackoverflow