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, Aug 02 '12 at 10:28
.val() is working on textareas, check if your spelling is right and dont have any "," on the last parameter — JohannesAndersson, Aug 02 '12 at 10:29
`.val()` works fine in the sense that the actual value of the textarea is returned. Define "not working"? — Rob W, Aug 02 '12 at 10:29
It's working just fine, the problem is elsewhere in your code. What error you get? What exact value you get? — Shadow Wizard Says No More War, Aug 02 '12 at 10:30
I will take a guess here - maybe you think it's "not working" because you lose line formatting? This is because newline in textarea is a special character while in HTML it's the `
` tag - you have to replace `\n` with `
` to preserve the formatting when displaying back in HTML. — Shadow Wizard Says No More War, Aug 02 '12 at 10:35
not working means that $('#details').val() gives back the value 'undefined' — Trinityx89x, Aug 02 '12 at 10:42

Christoph · Answer 1 · 2012-08-02T11:33:53.437

6

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 02 '12 at 11:33

answered Aug 02 '12 at 10:30

Christoph

48,137
19
97
125

not working means that $('#details').val() gives back the value 'undefined' – Trinityx89x Aug 02 '12 at 10:40
1

@user1571064 Then your selector is incorrect. `$('#details')` returns an empty jQuery collection, and `.val()` will therefore return `undefined`. – Rob W Aug 02 '12 at 10:42

score 4 · Answer 2 · edited Jul 20 '18 at 14:06

4

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

edited Jul 20 '18 at 14:06

Liam

25,247
27
110
174

answered Sep 30 '13 at 05:40

Jacob Munoz

65
1
1

score 3 · Answer 3 · answered Apr 03 '14 at 13:54

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.

score 2 · Answer 4 · answered May 28 '14 at 16:25

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 '14 at 16:25

omar j

501
5
8

You legend! Thanks – James Mar 23 '17 at 17:38
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. – Sebastián Vansteenkiste Oct 18 '18 at 19:53

score 1 · Answer 5 · answered Apr 25 '17 at 01:55

1

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.

answered Apr 25 '17 at 01:55

Ben Wilson

1,643
3
19
33

Was just in the same boat... switching from the same name selector to id values made val() start working on textarea field. – Chris Jan 10 '19 at 04:36

score 0 · Answer 6 · answered Mar 07 '13 at 12:16

0

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

answered Mar 07 '13 at 12:16

Amir

4,049
4
15
26

score 0 · Answer 7 · answered Jan 16 '19 at 22:31

0

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

answered Jan 16 '19 at 22:31

Alex M

1

this is what was in Inspect window:textarea cols="20" htmlattributes="{ class = form-control, id = pendingUserNotes }" id="PendingUserDto_PendingUserNotes" name="PendingUserDto.PendingUserNotes" rows="2" – Alex M Jan 16 '19 at 22:34

score 0 · Answer 8 · answered Jan 20 '21 at 10:08

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.
      }
    });
});

JQuery: .val() is not working for textarea

8 Answers8

Linked