Geek Answers Handbook

Get value from textarea and create a new text area with text

Now I have a problem with the value get ~ I performed a function that is, when I click the button, it will be displayed modally and there is a text field inside it. after you write all the contents inside, click ok, it will create a new text area with the text you wrote. You can do this several times. I only know how to add a new text area, but I have no idea how to get the value. It is very difficult for me with this function. Hope someone can help me. I am new to this area. Sorry for my bad grammar.

** Html

$(document).ready(function(){ var counter=1; $('.add').click(function() { $('.block:last').before('<div class="block">'+ '<textarea></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>

**

+5
source share
2 answers

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

This is how you get the textarea value. Replace '<textarea></textarea>'+ above

+2
source

You need to get the value from textarea with $('#area').val() and add with html or generate dom elements with 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>
+1
source

More articles:


All Articles