[jquery] Set value of textarea in jQuery

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?

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

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

did the job.

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

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

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

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.

I think this should work :

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

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()...

I think this should work :

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

$("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.

Oohh come on boys! it works just with

$('#your_textarea_id').val('some_value');

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

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='[email protected]' /></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.

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.

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

$('#your_textarea_id').html('some_value');

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

$("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.

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>

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.

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

Just use textarea Id by its type like it:

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

I think this should work :

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

Just use textarea Id by its type like it:

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

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($){_x000D_
    _x000D_
    $('.load_html').click(function(){_x000D_
        var my_var = $(this).data('my_html');_x000D_
        $('#dynamic_html').html( my_var ); _x000D_
    });_x000D_
    _x000D_
    $('#clear_html').click(function(){_x000D_
        $('#dynamic_html').empty(); _x000D_
    });_x000D_
    _x000D_
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<textarea id="dynamic_html"></textarea>_x000D_
<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>_x000D_
<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>_x000D_
<a id="clear_html" href="#">Clear HTML</a>

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

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

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

$('#your_textarea_id').html('some_value');

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

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>

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

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

did the job.

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

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

You can even use the below snippet.

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

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

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.

Oohh come on boys! it works just with

$('#your_textarea_id').val('some_value');

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

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

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 :)

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

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.

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()...

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

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

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

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='[email protected]' /></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.

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.

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 :)

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

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.

You can even use the below snippet.

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

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($){_x000D_
    _x000D_
    $('.load_html').click(function(){_x000D_
        var my_var = $(this).data('my_html');_x000D_
        $('#dynamic_html').html( my_var ); _x000D_
    });_x000D_
    _x000D_
    $('#clear_html').click(function(){_x000D_
        $('#dynamic_html').empty(); _x000D_
    });_x000D_
    _x000D_
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<textarea id="dynamic_html"></textarea>_x000D_
<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>_x000D_
<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>_x000D_
<a id="clear_html" href="#">Clear HTML</a>

I think this should work :

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

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

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 :)

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

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.

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

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 :)