append new text on textarea

Question

I am writing a tag system based on http://jsfiddle.net/joevallender/QyqYW/1/ but when i try to add new tag by typing in textarea, it works fine but when i click on any tag, previous new text will be removed.

HTML

<textarea id="tags"></textarea>
<div id="tagButtons"></div>

Javascript

var tags = [
  'JavaScript',    
  'jQuery',
  'HTML5',    
  'CSS3'
];

var selectedTags = [];

for(var i = 0; i < tags.length; i++) {
  var el = $('<span>').text(tags[i]);
  $('#tagButtons').append(el);
}

$('#tagButtons span').click(function(){
  var val = $(this).text();
  var index = selectedTags.indexOf(val);
  if(index > -1) {
    var removed = selectedTags.splice(index,1); 
    $(this).removeClass('selected');

  } else {
    selectedTags.push(val);
    $(this).addClass('selected');

  }
  $('#tags').val(selectedTags.join(', '));
});
​

Answer 1

Your problem is in this line

$('#tags').val(selectedTags.join(', '));

It's overwriting what was in the textarea before.

EDIT:

Try it : http://jsfiddle.net/QyqYW/92/

var tags = [
  'JavaScript',    
  'jQuery',
  'HTML5',    
  'CSS3',
  'PHP'
],
keys = "";

var selectedTags = [];

for(var i = 0; i < tags.length; i++) {
  var el = $('<span>').text(tags[i]);
  $('#tagButtons').append(el);
}

//changed click event to "on" event.. 
//it seems that click doesn't bind to dynamically added elements
$('#tagButtons').on("click" , "span" , function(){
     //Checks if you've forgot to type "," and then adds your tag
     if(keys != ""){
          selectedTags.push(keys);                                   
          $('#debug').prepend($('<div>').html('Added: ' + keys));
          var newEl = $('<span class="selected">').text(keys);
          $('#tagButtons').append(newEl);
          $('#tags').focus().val(selectedTags.join(', ') + ", ");                                    
          keys = "";
      }

      var val = $(this).text();
      var index = selectedTags.indexOf(val);
      if(index > -1) {
          var removed = selectedTags.splice(index,1); 
          $(this).removeClass('selected');
          $('#debug').prepend($('<div>').html('Removed: ' + removed));
          $('#tags').focus().val(selectedTags.join(', ') + ", ");
      } else {
          selectedTags.push(val);
          $(this).addClass('selected');
          $('#debug').prepend($('<div>').html('Added: ' + val));
          $('#tags').focus().val(selectedTags.join(', ') + ", ");                                    
      }                                                      


});

//adds tag after you type ",".. 
//if you forgot to, look above the first line in the on event
$("#tags").keydown(function(evt){                               
     if(evt.which == 188){
         selectedTags.push(keys);                                   
         $('#debug').prepend($('<div>').html('Added: ' + keys));
         var newEl = $('<span class="selected">').text(keys);
         $('#tagButtons').append(newEl);
         $('#tags').val(selectedTags.join(', '));                                       
         keys = "";
     } else if(evt.which ==8){ 
     //for after adding tag you can't use Backspace to delete it.
     //remove tag from butotns
         if(keys == ""){
         evt.preventDefault();
     } else {
         keys += String.fromCharCode(evt.which).toLowerCase();
     }

});

Answer 2

I continued working on the jsfiddle on your original question add and remove multiple tag by onclick to textarea

see http://jsfiddle.net/joevallender/QyqYW/14/

Answer 3

$(this).text();

Abowe, will only return value which was rendered oryginaly into DOM from html. Whatever you type into textarea is not there yet, you have to hook on ('#tags').on('keyup' function () {}); and store what was typed in order to include it to textarea later.

Answer 4

To be honest I think you should just put the tags into a seperate div or input. They should be stored seperately in a db anyway.