Jishnu V S Jishnu V S - 2 months ago 7
CSS Question

Get input value and generate multiple textarea and set value there

enter image description here

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>




Answer

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>

Comments