Check duplicate combination of inputs

Question

<div> <!--first combination-->
  <input type="text" name="color[]" value="red" />
  <input type="text" name="size[]" value="small" />
  <input type="text" name="kind[]" value="plastic" />
</div>

<div> <!--second combination-->
  <input type="text" name="color[]" value="red" />
  <input type="text" name="size[]" value="big" />
  <input type="text" name="kind[]" value="plastic" />
</div>

<div> <!--third combination--> 
  <input type="text" name="color[]" value="red" />
  <input type="text" name="size[]" value="small" />
  <input type="text" name="kind[]" value="plastic" />
</div>

<!--other combination might be here-->

In my HTML input values, noticed that first and third combination are exactly the same, how to achieve this in jQuery for me to check if there are duplicates combination?

Samle code only to check individual duplicate inputs

 $('input').each(function () {
    var $duplicate = $('input[value=' + $(this).val() + ']');
     console.log($duplicate.length > 1);
  });

HTML fiddle

You could add `ID`s to the `
` and then use this answer to notice duplicate `ID`s. http://stackoverflow.com/questions/482763/jquery-to-check-for-duplicate-ids-in-a-dom — blackandorangecat, Apr 18 '17 at 13:22
The question is very unclear, we have no knowledge of where the combinations come from. As you commented: 'other combination might be here' but how do these other combinations ever get there? Is this a static page that get's edited? Is het dynamic (which is most likely in this case) — Rick Jelier, Apr 18 '17 at 13:26
@Cruiser please see updated details, I have only code for checking individual duplicate inputs but not by three's. — bumbumpaw, Apr 18 '17 at 13:53
@RickJelier other divs with combinations of three inputs are added dynamically — bumbumpaw, Apr 18 '17 at 13:55
@bumbumpaw check my answer, this will surely help you with what you are expecting. — Ankit Agarwal, Apr 18 '17 at 13:58

score 1 · Answer 1 · answered Apr 18 '17 at 13:32

    $(function(){
    
    var child = [], duplicate_count=0;
    
    $("div").each(function(){
    child.push($(this).children());
    });
    
    for(var i=1; i<child.length; i++)
    {
     for(var k=0; k<child[i].length;k++){
       if(child[0][k].name == child[i][k].name)
         {
          duplicate_count++;
          break;
          }
      }
     
    }
    
    console.log(duplicate_count);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> <!--first combination-->
  <input type="text" name="color[]" value="red" />
  <input type="text" name="size[]" value="small" />
  <input type="text" name="kind[]" value="plastic" />
</div>

<div> <!--second combination-->
  <input type="text" name="color[]" value="red" />
  <input type="text" name="size[]" value="big" />
  <input type="text" name="kind[]" value="plastic" />
</div>

 <div> <!--third combination--> 
      <input type="text" name="color[]" value="red" />
      <input type="text" name="size[]" value="small" />
      <input type="text" name="kind[]" value="plastic" />
    </div>

Ankit Agarwal · Answer 2 · 2017-04-18T14:06:34.363

I have assume that all your div are inside <body> tag.

<script>
 function checkDivDuplicate(){
   var divArray = [];  //array that will hold all the div
   var sortedDivArray = [];  // array that will hold the div in sorted manner of their content

   var divCollection = $('body').find('div'); //get all the div, 3 div as of now
   //use another selector if your div are not inside <body>

  divCollection.each(function(){
      divArray.push($(this).html().toString().replace(/ /g,'')); 
  });
  //added each div content as a string in an array so that we can compare div content as a string without spaces

  sortedDivArray = divArray.slice().sort();  
  //the div contents are sorted so that we can compare them with less complexity

  var duplicateDiv = [];  //array that will hold all the duplicate div contents

  for (var i = 0; i < divArray.length - 1; i++) {
    if (sortedDivArray[i + 1] == sortedDivArray[i]) {
        duplicateDiv.push(sortedDivArray[i]);
    }
  }

  console.log(duplicateDiv);   
  //you will see the duplicate div content here 
 }
</script>

As you can see if your div are inside another HTML element say, <div id='content'></div> then simply replace this, var divCollection = $('body').find('div'); with this var divCollection = $('#content').find('div'); where content is the div id. Here is the working JSFiddle JSFIDDLE

score 1 · Accepted Answer · edited May 12 '17 at 17:32

Try the following code

jQuery:

var items = new Array();
getItemsArr();
$(document).keyup(function(){
  getItemsArr();
});

function getItemsArr(){
  $("div").each(function(i){
    items[i] = new Array();
    $(this).find(':input').each(function(j){
      items[i][j] = $(this).val();
    });
  });
  findDuplicateCombination(items);
}    

function findDuplicateCombination(arr) {
  var uniques = [];
  var itemsFound = {};
  for(var i = 0, l = arr.length; i < l; i++) {
    var stringified = JSON.stringify(arr[i]);
    if(itemsFound[stringified]) { 
      console.log("duplicate combination detected at combination : " +([i+1]));
      alert("duplicate combination detected at combination : " +([i+1]));
      continue; }
    uniques.push(arr[i]);
    itemsFound[stringified] = true;
  }
  return uniques;
}

Here is the working jsfiddle:https://jsfiddle.net/v2djzj28/8/

I think it should be helps you

Thanks , I think this is the most readable and straight forward solution, I like "Oh this is what i have in mind" but really cant start coding with it. haha — bumbumpaw, Apr 18 '17 at 14:23
what if I have three inputs per div but I only wanted to check duplicate combination of color and size (excluding kind)? — bumbumpaw, Apr 18 '17 at 14:40

score 1 · Answer 4 · answered Apr 18 '17 at 14:06

This is in no way optimized or perfect, but just a quick idea on how to tackle the problem. Basically it's tons of iterating over the inputs in each div, comparing each row against all others.

If you have loads of rows this might be quite costly and you should consider using something more refined.

I merge the values into a string for easy comparison, this might not work for all data types.

All rows that are duplicates (even the first instance) are colored in red by giving it a css class.

jQuery(function() {
 var allDivs = jQuery('div');
  jQuery.each(allDivs ,function(i,v) {
    var outerValues = getValues(v);
    jQuery.each(allDivs, function(ind,val) {
     if(i !== ind) {
        var innerValues = getValues(val);
        if(innerValues === outerValues) {
          jQuery(val).addClass('dupe');
        }
      }
    });
  });
});

function getValues(elem) {
  var valueElems = jQuery(elem).find('input');
  var result = '';
    jQuery.each(valueElems, function(i,v) {
     result += v.value;
    });
    return result;
  }

.dupe input {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> <!--first combination-->
  <input type="text" name="color[]" value="red" />
  <input type="text" name="size[]" value="small" />
  <input type="text" name="kind[]" value="plastic" />
</div>

<div> <!--second combination-->
  <input type="text" name="color[]" value="red" />
  <input type="text" name="size[]" value="big" />
  <input type="text" name="kind[]" value="plastic" />
</div>

 <div> <!--third combination--> 
      <input type="text" name="color[]" value="red" />
      <input type="text" name="size[]" value="small" />
      <input type="text" name="kind[]" value="plastic" />
    </div>

score 1 · Answer 5 · edited May 23 '17 at 12:02

Try this but take care, white spaces and break lines.

let divs = [];
$('#all div').each(function () {
    if(divs.indexOf($(this).html()) < 0){
      divs.push($(this).html());
    }        
});
$("#all").html(divs.join("<br/>"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="all">
 <!--first combination-->
<div>
  <input type="text" name="color[]" value="red" />
  <input type="text" name="size[]" value="small" />
  <input type="text" name="kind[]" value="plastic" />
</div>
 <!--second combination-->
<div>
  <input type="text" name="color[]" value="red" />
  <input type="text" name="size[]" value="big" />
  <input type="text" name="kind[]" value="plastic" />
</div>
 <!--third combination--> 
<div>
  <input type="text" name="color[]" value="red" />
  <input type="text" name="size[]" value="small" />
  <input type="text" name="kind[]" value="plastic" />
</div>

    
</div>

If your duplicate HTML has a different comments like  ,  .. etc. then you can remove comments from the HTML using Regex.

Read this question: Remove HTML comments with Regex, in Javascript

Check duplicate combination of inputs

5 Answers5