從textarea獲取值並用文本創建一個新的textarea

Question

現在我有一個獲取值的問題〜我正在做一個函數，當我點擊一個按鈕時，它將顯示一個模式，並且裏面有一個textarea。一旦你寫完所有的內容，點擊確定按鈕，它會創建一個新的文本區域和你寫的文本。你可以做多次。我只知道如何添加一個新的textarea，但我不知道如何獲得價值。我很難用這個函數〜希望任何人都可以幫助我。我是這方面的新手。對不起，我的語法錯誤。

**的Html

$(document).ready(function(){ 
 
\t 
 
var counter=1; 
 

 
$('.add').click(function() { 
 
\t 
 
\t 
 
$('.block:last').before('<div class="block">'+ 
 
'<textarea></textarea>'+ 
 
'</div>'); 
 
\t 
 
counter++; 
 
}); 
 

 

 
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="block"> 
 
<button type="button" class="btn btn-default btn-lg start-new-post-button-setting" data-toggle="modal" data-target="#codetextarea">Add code textarea</button> 
 
<div class="modal fade" id="codetextarea" role="dialog"> 
 
<div class="modal-dialog"> 
 
<div class="modal-content"> 
 
<div class="modal-body"> 
 
<textarea class=" textarea-setting" name="message" id="area"></textarea> 
 
</div> 
 
<div class="modal-footer"> 
 
<span class="add"><button type="button" class="btn btn-default" data-dismiss="modal">OK</button></span> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</div>

**

Answer 1

'<textarea>'+$("#area").val()+'</textarea>'+

這是你如何讓textarea的價值。將'<textarea></textarea>'+替換爲以上

Answer 2

您需要使用$('#area').val()從textarea獲得價值，並附加html或generate dom elements using jQuery。

$(document).ready(function() { 
 
    var counter = 1; 
 
    $('.add').click(function() { 
 
    $('.block:last').before(
 
     $('<div/>', { 
 
     class: 'block', 
 
     html: $('<textarea/>', { 
 
      text: $('#area').val() 
 
     }) 
 
     }) 
 
    ); 
 

 
    /* or by appending */ 
 
    // $('.block:last').before('<div class="block">' + 
 
    // '<textarea>' + $('#area').val() + '</textarea>' + 
 
    // '</div>'); 
 
    counter++; 
 
    }); 
 
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="block"> 
 
    <button type="button" class="btn btn-default btn-lg start-new-post-button-setting" data-toggle="modal" data-target="#codetextarea">Add code textarea</button> 
 
    <div class="modal fade" id="codetextarea" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
     <div class="modal-body"> 
 
      <textarea class=" textarea-setting" name="message" id="area"></textarea> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <span class="add"><button type="button" class="btn btn-default" data-dismiss="modal">OK</button></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>