9

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!

Christoph
  • 50,121
  • 21
  • 99
  • 128
StackOverly89
  • 137
  • 1
  • 1
  • 7
  • 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 The GPT Wizard 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 The GPT Wizard Aug 02 '12 at 10:35
  • 1
    not working means that $('#details').val() gives back the value 'undefined' – StackOverly89 Aug 02 '12 at 10:42

8 Answers8

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)

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • not working means that $('#details').val() gives back the value 'undefined' – StackOverly89 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
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
Liam
  • 27,717
  • 28
  • 128
  • 190
Jacob Munoz
  • 65
  • 1
  • 1
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.

Balazs Nemeth
  • 497
  • 4
  • 3
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');

omar j
  • 521
  • 6
  • 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
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.

Ben Wilson
  • 2,271
  • 3
  • 26
  • 35
  • 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
0

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

Amir
  • 4,089
  • 4
  • 16
  • 28
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

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
0

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.
      }
    });
});
Fefar Ravi
  • 794
  • 7
  • 18