Get input value and generate multiple textarea and set value there

Question

I have a DOM like this, when i fill the input field and click the button i need to create a textarea element and and stored the input value there. if i click multiple times create multiple textarea and multiple ID's, How can i do this please check my code, Best answers must be appreciated

$('#note').on('click', function(){
 var storedNoteVal = $('#enterVal').val();
 var count_id = 1;
 var noteCov = $('.note_cover');
 $('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea></textarea></div>');
 $(noteCov).find('textarea').val(storedNoteVal);
 $(noteCov).each(function(index, element) {
     $(this).attr('id', 'noteId' + count_id);
     count_id++;
 });
			
});

.full-width.note_cover {
    float: left;
	margin-bottom:15px;
}
.note_cover textarea {
    height: auto !important;
    height: 45px !important;
    resize: none;
    width: 100%;
	/*border:none;*/
}

<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">
            
</div><!-- #content_bag -->

<input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
<button id="note">click me</button>

You don't have to write $(noteCov).each(). Just use noteCov.each(). Just a comment. — StackSlave
– StackSlave, Commented Sep 28, 2016 at 5:53
Oh sorry for that , this is not my full code.. if i get the idea i can make it. the note_cover is the outer div — Jishnu V S
– Jishnu V S, Commented Sep 28, 2016 at 5:53
It looks like you're defining noteCov = $('.note_cover') before it exists. Notice that your .prepend() happens after that, so the .each() loop only refers to existing Elements, not the ones added later. — StackSlave
– StackSlave, Commented Sep 28, 2016 at 5:57

Abhishek Pandey · Accepted Answer · 2016-09-28 05:58:01Z

2

Your code is working fine, just put storedNoteVal in text-area, and input won't generate any text-area if its blank.

$('#note').on('click', function() {
  var storedNoteVal = $('#enterVal').val();
  var count_id = 1;
  var noteCov = $('.note_cover');
  
  if(storedNoteVal){
    $('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea>' + storedNoteVal + '</textarea></div>');
  //$(noteCov).find('textarea').val(storedNoteVal);
  $(noteCov).each(function(index, element) {
    $(this).attr('id', 'noteId' + count_id);
    count_id++;
  });
    
  }

});

.full-width.note_cover {
  float: left;
  margin-bottom: 15px;
}
.note_cover textarea {
  height: auto !important;
  height: 45px !important;
  resize: none;
  width: 100%;
  /*border:none;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">

</div>
<!-- #content_bag -->

<div>
  <input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
  <button id="note">click me</button>
</div>

edited Sep 28, 2016 at 5:58

answered Sep 28, 2016 at 5:51

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jishnu V S Over a year ago

Thanks for your support brother.. i have stucked with this

Jameson the dog · Accepted Answer · 2016-09-28 06:03:22Z

1

Building on Abhinshek answer -

Your code actually reassign id's to the textareas, since you loop through all the elements after prepending them.

You could define count_id as a window variable (outside the click function) and then just use it.

Also, you don't need to wrap noteCov with $() since $('.note_cover') returns a jQuery objects array

var count_id = 1;
$('#note').on('click', function() {
   var storedNoteVal = $('#enterVal').val();
   $('#content_bag').prepend('<div class="full-width note_cover" id="noteId_'+count_id+'"><textarea>' + storedNoteVal + '</textarea></div>');
    count_id++;
});

This way each textarea gets it's own unique id that doesn't change

answered Sep 28, 2016 at 6:03

Jameson the dog

1,8061 gold badge12 silver badges13 bronze badges

2 Comments

Jishnu V S Over a year ago

but it gives same ids

Jameson the dog Over a year ago

if var count_id = 1; is placed outside the scope of any other function - it's like using a global variable, then the count_id++ always iterates the same int

Collectives™ on Stack Overflow

Get input value and generate multiple textarea and set value there

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related