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!

Alert

Perhaps you have another element with id="details" in your page? – Skip

.val() is working on textareas, check if your spelling is right and dont have any "," on the last parameter – Drily

.val() works fine in the sense that the actual value of the textarea is returned. Define "not working"? – Grounds

It's working just fine, the problem is elsewhere in your code. What error you get? What exact value you get? – Kiloliter

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 <br /> tag - you have to replace \n with <br /> to preserve the formatting when displaying back in HTML. – Kiloliter

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

Answer 1

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)

Koslo

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

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

Answer 2

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 

Reportorial

Answer 3

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.

Lamontlamontagne

Answer 4

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

Edmiston

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. – Amortize

Answer 5

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.

Tachograph

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

Answer 6

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

Threepiece

Answer 7

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

Paradiddle

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

Answer 8

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

Consuelaconsuelo