Store added tags values in variable

Question

I have an add tag form which includes input field and button. The user can enter multiple tags. Tags are separated by a comma.
Everything is working fine but I want to store added tags values in a variable using javascript, jquery.
Here is what I have done so far -

$("#tags input").on({
        focusout: function () {
            var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
            if (txt) $("<span/>", {text: txt.toLowerCase(), insertBefore: this});
            this.value = "";   // To remove entered value after inserting comma
        },
        keyup: function (ev) {
            // if: comma|enter (delimit more keyCodes with | pipe)
            if (/(188|13)/.test(ev.which)) $(this).focusout();
        }
    });
    $('#tags').on('click', 'span', function () {
        if (confirm("Remove " + $(this).text() + "?")) $(this).remove();
    });

    $(document).on('click', '#select_all', function () {

        if (this.checked) {
            $('.all').each(function () {
                this.checked = true;
            });
        } else {
            $('.all').each(function () {
                this.checked = false;
            });
        }

    });  

$('#add_tag_btn').click(function () {    
  // Here I want to store added tags values in variable.          
        var added_tags=$('#tags span').html();
        alert(added_tags);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="tags">
    <input type="text" value="" class="form-control"   id="add_tag"placeholder="Add tag" />
  </div>
    <input type='button' class='btn btn-primary' id='add_tag_btn' value='Add'>
</form>

Answer 1

You just need to declare it globally and then keep adding tags to it and do some changes in the span creation code. I hope the code explains itself:

var added_tags = "";
$("#tags input").on({
  focusout: function() {
    var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
    if (txt) {
      //$(this).prevAll('span').remove();
      $("<span/>", {
        text: txt.toLowerCase(),
        insertBefore: this
      });

    }
    this.value = ""; // To remove entered value after inserting comma
  },
  keyup: function(ev) {
    // if: comma|enter (delimit more keyCodes with | pipe)
    if (/(188|13)/.test(ev.which)) $(this).focusout();
  }
});
$('#tags').on('click', 'span', function() {
  if (confirm("Remove " + $(this).text() + "?")) $(this).remove();
});

$(document).on('click', '#select_all', function() {

  if (this.checked) {
    $('.all').each(function() {
      this.checked = true;
    });
  } else {
    $('.all').each(function() {
      this.checked = false;
    });
  }

});

$('#add_tag_btn').click(function() {
  // Here I want to store added tags values in variable.  
  added_tags = "";
  $('#tags input').prevAll('span').each(function() {
    added_tags += (added_tags == "" ? "" : ",") + $(this).html();
  })
  alert(added_tags);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="tags">
    <input type="text" value="" class="form-control" id="add_tag" placeholder="Add tag" />
  </div>
  <input type='button' class='btn btn-primary' id='add_tag_btn' value='Add'>
</form>

EDIT: Fill tags dynamically so that it accounts for removed tags too

Answer 2

You can save the tag inside an array in the focus out event of input.

When you click add button you can join the elements of this array by ,

// Here I want to store added tags values in variable.          
var added_tags = [];

$("#tags input").on({
  focusout: function() {
    var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
    if(txt != "")
    added_tags.push(txt);
    
    if (txt) $("<span/>", {
      text: txt.toLowerCase(),
      insertBefore: this
    });
    this.value = ""; // To remove entered value after inserting comma
  },
  keyup: function(ev) {
    // if: comma|enter (delimit more keyCodes with | pipe)
    if (/(188|13)/.test(ev.which)) $(this).focusout();
  }
});
$('#tags').on('click', 'span', function() {
  if (confirm("Remove " + $(this).text() + "?"))
  {
 
  var index = added_tags.indexOf($(this).text());
  added_tags.splice(index, 1);
  $(this).remove();
  console.log(added_tags.join(","));
 }
});

$(document).on('click', '#select_all', function() {

  if (this.checked) {
    $('.all').each(function() {
      this.checked = true;
    });
  } else {
    $('.all').each(function() {
      this.checked = false;
    });
  }

});



$('#add_tag_btn').click(function() {
  console.log(added_tags.join(","));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="tags">
    <input type="text" value="" class="form-control" id="add_tag" placeholder="Add tag" />
  </div>
  <input type='button' class='btn btn-primary' id='add_tag_btn' value='Add'>
</form>

Answer 3

Here is the answer...

You just need to loop on button click for get each and every tag value in variable.

On button click create once array for get all the tag value in variable

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div id="tags">
        <input type="text" value="" class="form-control"   id="add_tag"placeholder="Add tag" />
    </div>
    <input type='button' class='btn btn-primary' id='add_tag_btn' value='Add'>
</form>

JS

<script>
    $("#tags input").on({
        focusout: function () {
            var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
            if (txt)
                $("<span/>", {text: txt.toLowerCase(), insertBefore: this});
            this.value = "";   // To remove entered value after inserting comma
        },
        keyup: function (ev) {
            // if: comma|enter (delimit more keyCodes with | pipe)
            if (/(188|13)/.test(ev.which))
                $(this).focusout();
        }
    });
    $('#tags').on('click', 'span', function () {
        if (confirm("Remove " + $(this).text() + "?"))
            $(this).remove();
    });

    $(document).on('click', '#select_all', function () {
        if (this.checked) {
            $('.all').each(function () {
                this.checked = true;
            });
        } else {
            $('.all').each(function () {
                this.checked = false;
            });
        }
    });
</script>

Button click..

 // Button Click
    $('#add_tag_btn').click(function () {
        var added_tags = [];
        i = 0;
        $('#tags span').each(function ()
        {
            added_tags[i++] = $(this).text();
        });
        alert(added_tags);
    });

I hope its helpful for you..