Get textarea text with javascript or Jquery

antoni picture antoni · Apr 29, 2011 · Viewed 122.9k times · Source

I have an iframe that contains a textarea, like so:

<html>
<body>

<form id="form1">
<div>
    <textarea id="area1" rows="15"></textarea>
</div>
</form>

</body>
</html>

I want to get the textarea text in the parent page. I've tried this:

var text = $('#frame1').contents().find('#area1').val();

But an empty string is returned. However if I put a value within tags this value is returned successfully:

<textarea id="area1" rows="15">something</textarea>

How can I get the value of the textarea from the page which contains the iframe?

Answer

acdcjunior picture acdcjunior · Jul 9, 2013

READING the <textarea>'s content:

var text1 = document.getElementById('myTextArea').value;     // plain JavaScript
var text2 = $("#myTextArea").val();                          // jQuery

WRITING to the <textarea>':

document.getElementById('myTextArea').value = 'new value';   // plain JavaScript
$("#myTextArea").val('new value');                           // jQuery

See DEMO JSFiddle here.


Do not use .html() or .innerHTML!

jQuery's .html() and JavaScript's .innerHTML should not be used, as they do not pick up changes to the textarea's text.

When the user types on the textarea, the .html() won't return the typed value, but the original one -- check demo fiddle above for an example.