Get textarea text with javascript or Jquery
Question
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?
7 answers
solution1
83 2013-07-09 21:58:27
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
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.
solution2
20 2011-04-29 11:37:56
To get the value from a textarea with an id you just have to do
Edited
$("#area1").val();
If you are having more than one element with the same id in the document then the HTML is invalid.
solution3
7 2013-09-01 22:00:17
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;
}
solution4
7 2011-11-23 05:08:47
You could use val() .
var value = $('#area1').val();
$('#VAL_DISPLAY').html(value);
solution5
1 2018-07-26 09:19:14
%100 Solution: $('textarea[name="areaname"]').val()
solution6
1 2011-04-29 11:35:07
Try.html() instead of.val():
var text = $('#frame1').contents().find('#area1').html();
solution7
1 2011-04-29 11:36:47
As @Darin Dimitrov said, if it is not an iframe on the same domain it is not posible, 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.
Edit
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!
Edit 2 Ok. 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 put this code:
$("#area1").change(function() {
window.parent.textAreaInIframe = $(this).val();
}).trigger("change");
solution8
1 2021-01-29 19:03:51
Try This:
var info = document.getElementById("area1").value; // Javascript
var info = $("#area1").val(); // jQuery
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.