Search code examples
javascriptjqueryhtmlcsshandsontable

Show alert message when duplicate values are present in a list

I have a two columns as shown in fig. when i clicked right button the selected field will go to 2nd column but i have 4 fields which is already coming from database and now if i move First Name to 2nd column it will also accept that but i need to show error message as "duplicates are not allowed" if there is already selected value

enter image description here

  "click #lstBox1 > option": function(e){            
        var selectedOpts = $('#lstBox1 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        $('#lstBox2').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
        var text = $(e.target).text();            
        var result = this.data.filter(function (obj) {
            return obj.columnsexpo === text;
        });
        if (_.isEmpty(result)) {
            this.data.push({columnsexpo: text, placeholder: true });
            this.tab.handsontable("loadData", this.data);
            console.log(this.data);
        }
    },
  "click #lstBox2 > option": function(e){
        var selectedOpts = $('#lstBox2 option:selected');            
        $('#lstBox1').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
        var text = $(e.target).text();
       // console.log(text);
        var result = this.data.filter(function (obj) {
            return obj.columnsexpo === text;
        });

            this.data.pop({ columnsexpo: text, placeholder: true });
            this.tab.handsontable("loadData", this.data);
            console.log(this.data);

    },
Solution

  • Tried to recreate an ugly looking copy of your code.

    What my code does is, on button click it gets the span element which was clicked.

    This element is then stored inside a variable and removed from the left side div.

    All the text data in span present in the right side div is taken and stored inside an array.

    The text of the selected span from left div is compared to the text present in all the spans in the right div.

    If a match is found alert is raises. The variable in which the left div span was stored is then appended to the right side div.

        var tomove;
    var selected;
    $('span').click(function(){tomove=$(this).text();selected=$(this)})
    $("button").click(function(){

selected.remove();
var t=$('#right > span');
var str=$(t).text().toString();
var arr=str.split('');
   var txt=$(selected).text().toString();
console.log(txt)

    if(arr.includes(txt))
    {
        alert("Duplicates aren't allowed!")
    }
else
{  $("#right").append(selected);}

  

    })
    
     div{

            border-color: blue;
            border-style: solid;
            border-width: 1px;
        }
        span
        {
            border-color:green;
            border-style: solid;
            border-width: 1px;
        }
        #right
        {
            margin-left:100px;
        }
     
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
    
       
</head>
<body id="body">
    <div id="left">
<span>a</span><br>
<span>s</span><br>
<span>d</span><br>
<span>f</span><br>
<span>g</span><br>

    </div>
    <div id="right">
            <span>e</span><br>
            <span>r</span><br>
            <span>g</span><br>
            <span>w</span><br>
            <span>g</span><br>

    </div>
    <button id="move">Move</button>
    
   </body>
   
</html>