JQuery: .val() is not working for textarea

Question

I am trying to read the content of a textarea, but .val() does not work for my textarea. I would be happy, if someone has a solution for me. Here's my code:

HTML:

<textarea id="details" class="required" rows="5"></textarea>

JS:

$.ajax({ type: "GET", url: "reserve.php", data: { details : $('#details').val(), ... }, ... });

Thank you!

Perhaps you have another element with id="details" in your page? — Rodik
– Rodik, Commented Aug 2, 2012 at 10:28
.val() is working on textareas, check if your spelling is right and dont have any "," on the last parameter — JohannesAndersson
– JohannesAndersson, Commented Aug 2, 2012 at 10:29
.val() works fine in the sense that the actual value of the textarea is returned. Define "not working"? — Rob W
– Rob W, Commented Aug 2, 2012 at 10:29
It's working just fine, the problem is elsewhere in your code. What error you get? What exact value you get? — user447356
– user447356, Commented Aug 2, 2012 at 10:30
not working means that $('#details').val() gives back the value 'undefined' — StackOverly89
– StackOverly89, Commented Aug 2, 2012 at 10:42

Christoph · Accepted Answer · 2012-08-02 11:33:53Z

5

val() works just fine... You must have your error elsewhere.

Example

Probably your selector in not matching. Check for typos and if you applied the correct prefix (# for ID or . for class)

edited Aug 2, 2012 at 11:33

answered Aug 2, 2012 at 10:30

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

StackOverly89 Over a year ago

not working means that $('#details').val() gives back the value 'undefined'

Rob W Over a year ago

@user1571064 Then your selector is incorrect. $('#details') returns an empty jQuery collection, and .val() will therefore return undefined.

Liam · Accepted Answer · 2018-07-20 14:06:40Z

This is a valid request, as I have experienced this exact same problem and can report the following:

No - it's not the selector, one valid object is returned
No - there is only one element with this id
No - there is no invalid HTML or bad tag usage as far as I have seen

Yes - there is an answer that isn't a hack or bad code:

$('#myTextArea')[0].value

Balazs Nemeth · Accepted Answer · 2014-04-03 13:54:31Z

I had the same problem. The solution in my case was, the there was two elements with the id "comment". The jQuery returned the value of the first one, which was empty. If I looked at the source code, I only saw one, since the second was added after an AJAX call. But when is searched in the inspector for "comment" (including the quotes) I saw both elements. I hope this helps you too.

omar j · Accepted Answer · 2014-05-28 16:25:42Z

2

Strangely i had a similar issue trying to empty all textareas. It wasnt a selector problem as i was selecting all textareas in the page with $('textarea'). I found that the following worked: $('textarea').text('');

So you could try setting the textarea with: $('textarea').text('my new value');

answered May 28, 2014 at 16:25

omar j

5417 silver badges8 bronze badges

1 Comment

Sebastián Vansteenkiste Over a year ago

Just in case myself from a parallel universe reads this: if you're not bothering with trying $('textarea') (or getting it with #id) or any other "direct" method because you do have a "seemingly perfectly valid" jQuery object that you obtained via another roundabout way (eg $parentElement.children('textarea').first()) I tell you: stop wasting time and find the object as directly as possible, sometimes .val('') will update the value in memory but not in the DOM, don't try to find an alternative, just do this.

Ben Wilson · Accepted Answer · 2017-04-25 01:55:03Z

My issue was the I was using a name selector instead of an id selector.

i.e.:

works:

'content': $(this).find('#text_content').val(),

doesn't work:

'content' : $(this).find('input[name=text_content]').val(),

Not sure why the name selector didn't work for the textarea (it worked for all other fields), but there you have it.

Was just in the same boat... switching from the same name selector to id values made val() start working on textarea field.

Amir · Accepted Answer · 2013-03-07 12:16:45Z

0

details : encodeURIComponent($('#details').val())

answered Mar 7, 2013 at 12:16

Amir

4,1314 gold badges18 silver badges28 bronze badges

Comments

Alex M · Accepted Answer · 2019-01-16 22:31:38Z

right click on TextAreaFor and select Inspect. Use the id that is generated by your browser, for some reason it generates its own id for TextArea even if you specify it in htmlAttributes. in code: @Html.TextAreaFor(model => model.PendingUserDto.PendingUserNotes, new { htmlAttributes = new { @class = "form-control", id = "pendingUserNotes" } }) in Inspect Window: Test Notes

this is what was in Inspect window:textarea cols="20" htmlattributes="{ class = form-control, id = pendingUserNotes }" id="PendingUserDto_PendingUserNotes" name="PendingUserDto.PendingUserNotes" rows="2"

Fefar Ravi · Accepted Answer · 2021-01-20 10:08:23Z

val() working fine. You get parameter is not proper.

HTMLCode

<textarea id="details" rows="5" placeholder="please enter id pass"></textarea> <button id="get_content">get Content</button> <div id="html_log"></div>

Javascript Code

$("#get_content").click(function(){ var datas = $('#details').val(); $.ajax({ type: "GET", url: "https://reqres.in/api/users", data: { id : datas, //id pass }, success: function(dataResult){ $('#html_log').text(dataResult.data['first_name']); //Check your returen parameter. } }); });

Collectives™ on Stack Overflow

JQuery: .val() is not working for textarea

8 Answers 8

2 Comments

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Linked

Related