584

I am attempting to set a value in a textarea field using jquery with the following code:

$("textarea#ExampleMessage").attr("value", result.exampleMessage);

The issue is, once this code executes, it is not altering the text in the textarea?

However when performing an alert($("textarea#ExampleMessage").attr("value")) the newly set value is returned?

1
  • 3
    If the jQuery magic is not working to set val() on <textarea>, and you're targeting by ID, chances are there are multiple elements with the same ID. Oct 25, 2017 at 14:31

28 Answers 28

961

Have you tried val?

$("textarea#ExampleMessage").val(result.exampleMessage);
12
  • 5
    mostly true, although val does take the time to make sure the value you're setting is a string, and attr seems to do a bit more magic overall.
    – enobrev
    Jan 6, 2009 at 6:31
  • 64
    Yeah. A textarea doesn't have a value attribute, while an input does.
    – MDCore
    Jan 6, 2009 at 12:20
  • 14
    Agreed, but val() is setting it in this instance. They [jquery] must determine it's textarea type and set the text.
    – GONeale
    Jan 7, 2009 at 0:03
  • 18
    textarea has a value (JavaScript) property just like a text input. It doesn't have an HTML value attribute, but that doesn't matter, because both val() and attr('value') write to the JavaScript value property. Note, attr() does not set HTML attributes! It only sets JavaScript properties, whilst trying to hide the difference for cases like class/className where the name is different. But you will still see the difference for places where the attribute and property do different things, such as in form elements.
    – bobince
    Sep 8, 2009 at 10:21
  • 2
    val(foo) works for me (jQuery 1.9.1). Using text(foo) loses to update textarea content loses the linebreaks on IE, using val(foo) preserves them.
    – Tim
    Sep 11, 2013 at 9:21
81

Textarea has no value attribute, its value comes between tags, i.e: <textarea>my text</textarea>, it is not like the input field (<input value="my text" />). That's why attr doesn't work :)

0
59

$("textarea#ExampleMessage").val() in jquery just a magic.

You should notice that textarea tag using inner html to display and not in value attribute just like input tag.

<textarea>blah blah</textarea>
<input type="text" value="blah blah"/>

You should use

$("textarea#ExampleMessage").html(result.exampleMessage)

or

$("textarea#ExampleMessage").text(result.exampleMessage)

depend on if you want to display it as html tags or plain text.

4
  • 1
    You are correct, textarea doens't have a val or value, and jquery is just doing some magic to make life easier for the developer. Aug 26, 2010 at 0:37
  • 16
    It's not called magic, it's called abstraction. textarea is only 1's and 0's, but all the layers of abstraction in your computer hides that for you. It's okay to point it out, but please don't ask people to downvote other answers for such a reason... :) Oct 1, 2010 at 14:22
  • 10
    beware - html() executes script tags.
    – Lincoln B
    Jan 6, 2014 at 0:57
  • 6
    From jQuery API "The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method."
    – pilot
    Jul 13, 2018 at 15:08
25

Oohh come on boys! it works just with

$('#your_textarea_id').val('some_value');
1
  • Only if you use an ID selector. I cannot as mine is third-party generated code
    – Jack
    Sep 11, 2019 at 12:25
18

I think this should work :

$("textarea#ExampleMessage").val(result.exampleMessage);
14

On android .val and .html didn't work.

$('#id').text("some value")

did the job.

3
  • 2
    From jQuery API "The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method."
    – pilot
    Jul 13, 2018 at 15:10
  • Yes. But to my surprise, this worked. on .net C# Razor textarea, When I was manipulating dom to add more fields by clicking. I used this to keep existing fields state values $('#id').text($('#id').val());
    – Developer
    Mar 10, 2021 at 21:32
  • I needed a way to clear a textarea that was populated after posting the form to process using PHP (a transliteration function). This is the solution that worked.
    – cheeseus
    May 8, 2022 at 13:41
10

i had the same question so i decided to try it in the current browsers (we're one and a half year later in time after this question), and this (.val) works

$("textarea#ExampleMessage").val(result.exampleMessage); 

for

  • IE8
  • FF 3.6
  • FF4
  • Opera 11
  • Chrome 10
1
  • 1
    For the record, one of the exceptional jQuery functionalities is the one of provide browser compatibility, so yes, it's pretty likely that .val() will do its magic in several browsers ;)
    – Diosney
    Aug 21, 2011 at 3:19
8

I had same issue and this solution didn't work but what worked was to use html

$('#your_textarea_id').html('some_value');
3
  • 3
    no, html() is working only once per textarea, next time, you want to dynamically change content of textarea, html() will not work...
    – Legionar
    Dec 19, 2014 at 13:49
  • @Legionar then how to handle this case ? Oct 3, 2018 at 6:24
  • well, this one helped me stackoverflow.com/questions/1219860/… using these functions i just set encoded value in textarea using $('#textarea').val(encodedtext); Oct 3, 2018 at 7:02
6

textarea doesn't store values as

<textarea value="someString">

instead, it stores values in this format:

<textarea>someString</textarea>

So attr("value","someString") gets you this result:

<textarea value="someString">someOLDString</textarea>.

try $("#textareaid").val() or $("#textareaid").innerHTML instead.

0
6

There the problem : I need to generate html code from the contain of a given div. Then, I have to put this raw html code in a textarea. When I use the function $(textarea).val() like this :

$(textarea).val("some html like < input type='text' value='' style="background: url('http://www.w.com/bg.gif') repeat-x center;" /> bla bla");

or

$('#idTxtArGenHtml').val( $('idDivMain').html() );

I had problem with some special character ( & ' " ) when they are between quot. But when I use the function : $(textarea).html() the text is ok.

There an example form :

<FORM id="idFormContact" name="nFormContact" action="send.php" method="post"  >
    <FIELDSET id="idFieldContact" class="CMainFieldset">
        <LEGEND>Test your newsletter&raquo; </LEGEND> 
        <p>Send to &agrave; : <input id='idInpMailList' type='text' value='youremail@gmail.com' /></p>
        <FIELDSET  class="CChildFieldset">
            <LEGEND>Subject</LEGEND>
            <LABEL for="idNomClient" class="CInfoLabel">Enter the subject: *&nbsp</LABEL><BR/>
          <INPUT value="" name="nSubject" type="text" id="idSubject" class="CFormInput" alt="Enter the Subject" ><BR/>
    </FIELDSET>
    <FIELDSET  class="CChildFieldset">
        <INPUT id="idBtnGen" type="button" value="Generate" onclick="onGenHtml();"/>&nbsp;&nbsp;
          <INPUT id="idBtnSend" type="button" value="Send" onclick="onSend();"/><BR/><BR/>
            <LEGEND>Message</LEGEND>
                <LABEL for="idTxtArGenHtml" class="CInfoLabel">Html code : *&nbsp</LABEL><BR/>
                <span><TEXTAREA  name="nTxtArGenHtml" id="idTxtArGenHtml" width='100%' cols="69" rows="300" alt="enter your message" ></TEXTAREA></span>
        </FIELDSET>
    </FIELDSET>
</FORM>

And javascript/jquery code that don't work to fill the textarea is :

function onGenHtml(){
  $('#idTxtArGenHtml').html( $("#idDivMain").html()  );
}

Finaly the solution :

function onGenHtml(){
  $('#idTxtArGenHtml').html( $("#idDivMain").html() );
  $('#idTxtArGenHtml').parent().replaceWith( '<span>'+$('#idTxtArGenHtml').parent().html()+'</span>');
}

The trick is wrap your textarea with a span tag to help with the replaceWith function. I'm not sure if it's very clean, but it's work perfect too add raw html code in a textarea.

5

Text Area doesnot have value. jQuery .html() works in this case

$("textarea#ExampleMessage").html(result.exampleMessage);
2
  • 2
    no, html() is working only once per textarea, next time, you want to dynamically change content of textarea, html() will not work...
    – Legionar
    Dec 19, 2014 at 13:49
  • and if you did .empty().html('newContent') @Legionar ?
    – V H
    Feb 8, 2017 at 14:14
5

I think there is missing one important aspect:

$('#some-text-area').val('test');

works only when there is an ID selector (#)

for class selector there is an option to use native value like:

$('.some-text-area')[0].value = 'test';
3

It works for me.... I have built a face book wall...

Here is the basis of my code:

// SETS MY TEXT AREA TO EMPTY (NO VALUE)
$('textarea#message_wall').val('');
0
3

To set textarea value of encoded HTML (to show as HTML) you should use .html( the_var ) but as mentioned if you try and set it again it may (and probably) will not work.

You can fix this by emptying the textarea .empty() and then setting it again with .html( the_var )

Here's a working JSFiddle: https://jsfiddle.net/w7b1thgw/2/

jQuery(function($){
    
    $('.load_html').click(function(){
        var my_var = $(this).data('my_html');
        $('#dynamic_html').html( my_var ); 
    });
    
    $('#clear_html').click(function(){
        $('#dynamic_html').empty(); 
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="dynamic_html"></textarea>
<a id="google_html" class="load_html" href="#" data-my_html="&lt;a href=&quot;google.com&quot;&gt;google.com&lt;/a&gt;">Google HTML</a>
<a id="yahoo_html" class="load_html" href="#" data-my_html="&lt;a href=&quot;yahoo.com&quot;&gt;yahoo.com&lt;/a&gt;">Yahoo HTML</a>
<a id="clear_html" href="#">Clear HTML</a>

3

Adding to some great 👍 answers above, in a case where you using multi-forms and the element NAME is what you want to target.

$('textarea[name=ExampleMessageElName]').val('Some Message here');
2

I tried with .val() .text() .html() and had some bugs using jQuery to read or set value of a textarea... i endup using native js

$('#message').blur(function() {    
    if (this.value == '') { this.value = msg_greeting; }
});
2

You can even use the below snippet.

$("textarea#ExampleMessage").append(result.exampleMessage);
2

We can either use .val() or .text() methods to set values. we need to put value inside val() like val("hello").

  $(document).ready(function () {
    $("#submitbtn").click(function () {
      var inputVal = $("#inputText").val();
      $("#txtMessage").val(inputVal);
    });
  });

Check example here: http://www.codegateway.com/2012/03/set-value-to-textarea-jquery.html

2

Just use textarea Id by its type like it:

$("textarea#samplID").val()
0
2

I've used $(textarea).val/html/text(any_str_var) all worked for me. If you want to be sure that your variable as a string is added to the textarea, you can always concat like so:

$(textarea).val(unknown_var + '')

.val() method is definitely used on textarea - see: https://api.jquery.com/val/

.html() can be used to get or set the contents of any element - see: https://api.jquery.com/html/#html2

.text() is the same as .html except this can be used to set XML content: see - https://api.jquery.com/text/#text-text

You can also read more about how each act upon special characters with each of those links.

2

In my condition i had this input in iframe, any of the above resolve my problem but this :

I just solve it like in this way :

$('#myId')[0].value="MY VALUE";

My input field :

<textarea name="cmyInput" rows="2" cols="20" id="myId" class="nd" ignoreautotab="1"></textarea>
1

The accepted answer works for me, but only after I realized I had to execute my code after the page was finished loading. In this situation inline script didn't work, I guess because #my_form wasn't done loading yet.

$(document).ready(function() {
  $("#my_form textarea").val('');
});
1
  • pdub23, it's always better to comment on the accepted answer than creating a new answer… Mar 19, 2012 at 5:26
1

When I had JQuery v1.4.4 in the page, neither of these worked. When injecting JQuery v1.7.1 into my page, it worked finally. So in my case, it was my JQuery version that was causing the issue.

id ==> textareaid

======================

var script1 = document.createElement("script");
script1.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
document.body.appendChild(script1);

var script2 = document.createElement("script"); 
script2.type = "text/javascript"; 
script2.innerHTML = "var $jq171 = $.noConflict();"; 
document.body.appendChild(script2);

$jq171('#textareaid').val('xxx');
0

Just use this code and you will always have the value:

var t = $(this); var v = t.val() || t.html() || t.text();

So it will check val() and set its value. If val() gets an empty string, NULL, NaN o.s. it will check for html() and then for text()...

0

This works:

var t = $('#taCommentSalesAdministration');
t.val('Hi');

Remember, the tricky part here is making sure you use the correct ID. And before you use the ID make sure you put # before it.

0

Using $("textarea#ExampleMessage").html('whatever you want to put here'); can be a good way, because .val() can have problems when you are using data from database.

For example:

A database field named as description has the following value asjkdfklasdjf sjklñadf. In this case using .val() to assign value to textarea can be a tedious job.

0

I've tried to set value / text / html using JQuery but was not successful. So I tried the following.

In this case I was injecting new textarea element to a after DOM created.

 var valueToDisplay= 'Your text here even with line breaks';
 var textBox = '<textarea class="form-control" >'+ valueToDisplay +'</textarea>';
 $(td).html(textBox);

enter image description here

0

To edit text inside of textarea through jQuery use $(id).html e.g.

<textarea id="descricao2" name="descricao2" class="form" style="width:600px;height: 130px;"></textarea>

$("#descricao2").html("hello");

Not the answer you're looking for? Browse other questions tagged or ask your own question.