Not getting text area text after button click?

Question

I have some contend in textarea ..When I alert it give correct contend .But when I append in "hello" text in text contend area .and get contend on button click it does not give updated contend why ? it should show with "hello" contend.It show previous contend why ?

here is code https://jsfiddle.net/4oa1q9qe/1/

$(document).ready(function(){
 alert($("#test").html())   


 $("#btn").click(function(){
      alert($("#test").html())   
 })


})

Add "hello" in text area and get get the contend it gives same contend why as previous ?

Please don't link to code, everything needed to understand the problem and desired result should be contained in the question. — firelynx, Jul 07 '15 at 12:25

score 3 · Answer 1 · answered Jul 07 '15 at 11:57

3

Use val() option to get the text value of input or textarea elements

The .val() method is primarily used to get the values of form elements such as input, select and textarea

$(document).ready(function(){
 alert($("#test").val())  

 $("#btn").click(function(){
      alert($("#test").val())   
 })
})

DEMO

answered Jul 07 '15 at 11:57

Nagaraj S

13,316
6
32
53

but @nagpal it fail When I need html contend ? – user944513 Jul 07 '15 at 12:02
@user944513 That's not the purpose of `textarea` to contain HTML. I Think `textarea` tag name is quite explicit regarding it – A. Wolff Jul 07 '15 at 12:09

score 2 · Answer 2 · answered Jul 07 '15 at 11:59

use $("#test").val() instead of $("#test").html()

$(document).ready(function(){
 alert($("#test").val())   
 
 
 $("#btn").click(function(){
      alert($("#test").val())   
 })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="4" cols="50" id="test">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. 
</textarea>
<button id="btn">btn</button>

for html contend it fail why ? – user944513 Jul 07 '15 at 12:05 — user944513, Jul 07 '15 at 12:05

score 1 · Answer 3 · edited May 23 '17 at 12:21

It show previous contend why ?

The inner content of the <textarea> element, e.g. foo in

<textarea>foo</textarea>

is used as the default value. Changing the value of the textarea does not change its inner content, it only changes the value property. Hence when you use .html(), you get the value that is present in the original HTML.

As already mentioned, use .val() to get the current value. See also val() vs. text() for textarea .

score 1 · Answer 4 · answered Jul 07 '15 at 12:29

use .val() instead of .html()

.val() returns or sets the value of a <textarea> or <input>. It has no effect on anything else.

$("button").click(function() {
  alert($("textarea").val())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<button>Show data</button>

Not getting text area text after button click?

4 Answers4