Question

Add multiple items to text-area with duplicate items.

I have one text-area which store data after clicked add data link.

How can i prevent add duplicate items to text-area?

JavaScript call DOM event:

  var Dom = {
    get: function(el) {
      if (typeof el === 'string') {
        return document.getElementById(el);
      } else {
        return el;
      }
    },
    add: function(el, dest) {
      var el = this.get(el);
      var dest = this.get(dest);
      dest.appendChild(el);
    },
    remove: function(el) {
      var el = this.get(el);
      el.parentNode.removeChild(el);
    }
  };

  var Event = {
    add: function() {
      if (window.addEventListener) {
        return function(el, type, fn) {
          Dom.get(el).addEventListener(type, fn, false);
        };
      } else if (window.attachEvent) {
        return function(el, type, fn) {
          var f = function() {
            fn.call(Dom.get(el), window.event);
          };
          Dom.get(el).attachEvent('on' + type, f);
        };
      }
    }()
  };

JQuery add data to textarea:

    $("#lkaddlanguage").click(function(){


                 var totalstring;
                 var checkconstring = $("#contentlng").text();

                 var strLen = checkconstring.length;
                 myStr = checkconstring.slice(0,strLen-1);
                 //alert(myStr);

                 var checkedItemsArray = myStr.split(";");
                 var j = 0;
                 var checkdup=0;

                totalstring=escape($("#textval").val()) ;

                var i = 0;

                var el = document.createElement('b');
                el.innerHTML = totalstring +";";

                Dom.add(el, 'txtdisplayval');

                Event.add(el, 'click', function(e) {
                  Dom.remove(this);
                });

    });

HTML Display data

<input type="textbox" id="textval">
<a href="#lnk" id="lkaddlanguage" >Add Data</a>
<textarea readonly id="txtdisplayval" ></textarea>

Answer 1

This seems a very straightforward requirement to me, so I’m not quite clear where you’re getting stuck. I have not tried too hard to figure out your existing code given that you are referencing elements not shown in your html (“contentlng”). Also, mixing your own DOM code with jQuery seems a bit pointless. You don’t need jQuery at all, but having chosen to include it why then deliberate not use it?

Anyway, the following short function will keep a list of current items (using a JS object) and check each new item against that list. Double-clicking an item will remove it. I’ve put this in a document ready, but you can manage that as you see fit:

<script>
$(document).ready(function() {
   var items = {};

   $("#lkaddlanguage").click(function(){
       var currentItem = $("#textval").val();

       if (currentItem === "") {
           alert("Please enter a value.");
       } else if (items[currentItem]) {
           alert("Value already exists.");
       } else {
           items[currentItem] = true;
           $("#txtdisplayval").append("<span>" + currentItem + "; </span>");
       }

       // optionally set up for entry of next value:
       $("#textval").val("").focus();
       return false;
   });

   $("#txtdisplayval").on("dblclick", "span", function() {
       delete items[this.innerHTML.split(";")[0]];
       $(this).remove();
   });
});
</script>

<input type="textbox" id="textval">
<a href="#lnk" id="lkaddlanguage" >Add Data</a><br>
<div id="txtdisplayval" ></div>

<style>
 #txtdisplayval {
    margin-top: 5px;
    width  : 200px;
    height : 100px;
     overflow-y : auto;
    border : 1px solid black;
 }
</style>

Note I’m using a div (styled to have a border and allow vertical scrolling) instead of a textarea.

As you can see I’ve coded it to display an alert for duplicate or empty items, but obviously you could remove that and just ignore duplicates (or substitute your own error handling). Also I thought it might be handy to clear the entry field and set focus back to it ready for entry of the next value, but of course you can remove that too.

Working demo: http://jsfiddle.net/LTsBR/1/