CODEWITHSUNDEEP
javascriptjquery
Erdi
Erdi

Reputation: 1884

Get value of appended textarea

i append a textarea with a button

$(".mydiv").append("<textarea id='myTextarea'></textarea><div class='sendReply btn btn-default'>my button</div>");

After that , i'm writing new texts into textarea and trying to get new writed value inside from textarea with this on click function ;

jQuery(document).on('click','.sendReply', function () {
  var myNewText =  $("#myTextarea").val();
    console.log(myNewText);
  });

But it says that this an "empty string" , if i add text area with a value like <textarea id="myTextarea">some text</textarea> my fucntion works and gives me "some text" but if i edit textarea and click sendReply button (my on click function), it is still gives me "some text" , it don't change

How can i get edited textarea value after apppend a textarea?

Upvotes: 0

Views: 1331

Answers (3)

Satpal
Satpal

Reputation: 133403

You have an . in .sendReply while appending the HTML

You just need to remove . from .sendReply

Use

<div class='sendReply btn btn-default'>my button</div>"

As you are using Event delegation your jQuery will work.

As you are adding textarea with same ID multiple times? $("#myTextarea").val() will always show value of first textarea with id myTextarea. You can use a common class and then use prev() to select the textarea

See example

$(document).ready(function() {

  $(document).on('click', '.sendReply', function() {
    var myNewText = $(this).prev(".myTextarea").val();
    alert(myNewText);
  });
  for (var i = 0; i < 5; i++) {
    $(".mydiv").append("<textarea class='myTextarea'>some text</textarea><div class='sendReply btn btn-default'>my button</div>");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='mydiv'></div>

Upvotes: 3

Adarsh Gowda K R
Adarsh Gowda K R

Reputation: 951

Instead using div .. use some standard to code up .. you can make it has button .. here is the code 

<div class="mydiv"></div>

$(".mydiv").append("<textarea id='myTextarea'></textarea><input type='button' class='sendReply btn btn-default' value='my button'></input>");
jQuery(document).on('click','.sendReply', function () {
  var myNewText =  $("#myTextarea").val();
    console.log(myNewText);
    alert(myNewText);
  });

JSFIDDLE

Upvotes: 1

Adarsh Gowda K R
Adarsh Gowda K R

Reputation: 951

It should be 

$(".mydiv").append("<textarea id='myTextarea'></textarea><div class='sendReply btn btn-default'>my button</div>");

then 

jQuery(document).on('click','.sendReply', function () {
  var myNewText =  $("#myTextarea").val();
    console.log(myNewText);
  });

dont use dot(.) for the classname..

Upvotes: 1

Related Questions