Login/Register
Get textarea text with JavaScript or jQuery
Asked Answered
javascriptjqueryhtmltextarea
M

7

58

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 <textarea> 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?

Manley answered 29/4, 2011 at 11:29 Comment(3)
Is this iframe on the same domain as the parent page? If not, no need to continue to waste your time as for security reasons you cannot access the DOM of documents which are not stored on your domain. – Greatest
Yes, both pages are on the same folder and on the same application. – Manley
try text instead of val or html var text = $('#frame1').contents().find('#area1').text(); , else. You need to debug and add watch and try all sorts of things... – Plastered
M
92

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 in the textarea, the .html() won’t return the typed value, but the original one -- check the demo fiddle above for an example.

Mackinnon answered 9/7, 2013 at 21:58 Comment(0)
F
20

To get the value from a textarea with an id you just have to do

$("#area1").val();

If you are having more than one element with the same id in the document then the HTML is invalid.

Fissi answered 29/4, 2011 at 11:37 Comment(5)
No. Do not use html() to get the value from a textarea. Use val(), or even better, the value property of the element itself. – Cleocleobulus
@Diego: No, html() is wrong. html() returns the initial value of the textarea, not the current value, so once the value is changed (either by script or by the user), it's wrong. See jsfiddle.net/SdGGy/1 – Cleocleobulus
@Tim Down: I've always used .val, but thought it was the same. Thanks for the data! – Billington
both ways are ok when I put something within <textarea>Something</textarea> – Manley
I was using the textarea togheter with tinymce wysiwyg editor. This causes a conflict with my textarea since I was unable to get the text. The text must be retrieved using javascript object from tinymce script. Thankyou everybody! – Manley
L
8

Get textarea text with JavaScript:

<!DOCTYPE html>
<body>
<form id="form1">
    <div>
        <textarea id="area1" rows="5">Yes</textarea>
        <input type="button" value="get txt" onclick="go()" />
        <br />
        <p id="as">Now what</p>
    </div>
</form>
</body>

function go() {
    var c1 = document.getElementById('area1').value;
    var d1 = document.getElementById('as');
    d1.innerHTML = c1;
}

http://jsfiddle.net/PUpeJ/3/

Longhand answered 1/9, 2013 at 22:0 Comment(0)
P
7

You could use val().

var value = $('#area1').val();
$('#VAL_DISPLAY').html(value);
Perbunan answered 23/11, 2011 at 5:8 Comment(0)
W
2

Try this:

var info = document.getElementById("area1").value; // JavaScript
var info = $("#area1").val(); // jQuery
Witham answered 29/1, 2021 at 19:3 Comment(0)
C
1

Try .html() instead of .val():

var text = $('#frame1').contents().find('#area1').html();
Cana answered 29/4, 2011 at 11:35 Comment(1)
No, html() does not work correctly for finding the value of a textarea. See comments on @rahul's answer. – Cleocleobulus
B
1

As Darin Dimitrov said, if it is not an iframe on the same domain, it is not possible. If it is, check that $("#frame1").contents() returns all it should, and then check if the textbox is found:

$("#frame1").contents().find("#area1").length should be 1.

If when your textarea is "empty", an empty string is returned and when it has some text entered that text is returned, then it is working perfect!! When the textarea is empty, an empty string is returned!

Here there is one way. It is not very pretty, but it works:

Outside the iframe you will access the textarea like this:

window.textAreaInIframe

And inside the iframe (which I assume has jQuery) in the document ready, add this code:

$("#area1").change(function() {
    window.parent.textAreaInIframe = $(this).val();
}).trigger("change");
Billington answered 29/4, 2011 at 11:36 Comment(4)
I can access to the object and the value typed within textarea tags. But I need to get the value typed by the user. – Manley
No. It returns me an empty string when there is nothing within <textarea> tags even if I type something into text area. If i type something into text area and there is a value within <textarea> tags this value is returned, not the typed into textarea. – Manley
@antoni: I've edited my answer once again. I think this will do. – Billington
Thankyou!! I had to keep in mind that I was using the textarea togheter with tinymce wysiwyg editor. This causes a conflict with my textarea since I was unable to get the text. The text must be retrieved using javascript object from tinymce script. So, now is solved. Thankyou everybody! – Manley

© 2022 - 2024 — McMap. All rights reserved.