Set value of textarea in jQuery

Viewed 1049440

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?

28 Answers

Have you tried val?

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

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

I think this should work :

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

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

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

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

$("textarea#ExampleMessage").html(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('');

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

Just use textarea Id by its type like it:

$("textarea#samplID").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.

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>

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

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

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

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

enter image description here

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