erhalten Wert von Textarea und erstellen Sie eine neue Textarea mit dem Text

Question

Jetzt habe ich ein Problem mit dem Wert erhalten ~ Ich habe eine Funktion, die ist, wenn ich auf eine Schaltfläche klicken wird es ein Modal und in ihm ein Textfeld zeigen. Sobald Sie den gesamten Inhalt darin geschrieben haben, klicken Sie auf die Schaltfläche OK, um ein neues Textfeld mit dem von Ihnen geschriebenen Text zu erstellen. Sie können es mehrfache Zeit tun. Ich kann nur ein neues Textarea hinzufügen, aber ich habe keine Idee, wie man den Wert erhält. Ich habe eine harte Zeit mit dieser Funktion ~ hoffe, dass jeder mir helfen kann. Ich bin ein Neuling in diesem Bereich. Tut mir leid wegen meiner schlechten Grammatik.

** 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>'+

Dies ist, wie man den Wert des Textbereiches erhalten. Ersetzen Sie Ihre '<textarea></textarea>'+ mit über

Answer 2

Sie müssen Wert von Textarea mit $('#area').val() und anhängen mit der HTML oder 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>