Get textarea text with javascript or Jquery

javascript jquery html textarea

133,138

Solution 1

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.

Solution 2

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.

Solution 3

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/

Solution 4

You could use val().

var value = $('#area1').val();
$('#VAL_DISPLAY').html(value);

Solution 5

Try this:

var info = document.getElementById("area1").value; // JavaScript
var info = $("#area1").val(); // jQuery

View more solutions

133,138

Author by

antoni

Updated on July 09, 2022

Comments

antoni almost 2 years
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?
Tim Down about 13 years

No. Do not use html() to get the value from a textarea. Use val(), or even better, the value property of the element itself.
Tim Down about 13 years

@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
Diego about 13 years

@Tim Down: I've always used .val, but thought it was the same. Thanks for the data!
Tim Down about 13 years

No, html() does not work correctly for finding the value of a textarea. See comments on @rahul's answer.
antoni about 13 years

both ways are ok when I put something within <textarea>Something</textarea>
antoni about 13 years

I can access to the object and the value typed within textarea tags. But I need to get the value typed by the user.
antoni about 13 years

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.
Diego about 13 years

@antoni: I've edited my answer once again. I think this will do.
antoni about 13 years

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!
antoni about 13 years

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!