Question

How can I compare multiple input field values and if there is a match alert ‘There are similar values’ using jQuery?

<input value="111"> //similar
<input value="222">
<input value="111"> //similar
<input value="333">

This html code above should alert ‘There are similar values’, as it has 2 values which are the same. How can it be done with jQuery?

My tried(Following code doesn’t work):

DEMO: http://jsfiddle.net/HpWLQ/

$('input').each(function () {
    var $this = $(this);
    var val = $this.val();
    vals.push(val);
});
for (var i = 0; i < vals.length; i++) {
    for (var n = 0; n < vals.length; n++) {
        if (n !== i) {
            if (vals[i] === vals[n]) {
                alert('There are similar values');
            }
        }
    }
}

Answer 1

Edit: In order to satisfy @Raynos, here’s a pure JS solution.

var vals = {};
var flag = false;
var collection = document.getElementsByTagName('input');
collection = [].slice.call(collection);

collection.forEach(function(element, index, array) {
    if (flag === true) return;
    var i = element.value;
    if (vals[i])
    {
        flag = true;
        alert('There are duplicates!');
    }
    else
    { 
        vals[i] = 1;
    }
});

​

---

Bonus: I ran my solutions through jsperf; the last one is obviously by far the fastest.

Edit: Here’s what would probably be the jQuery way of solving your problem (Working fiddle here). My original answer remains below.

var duplicatefound = false;
$('input').each(function(index, item){
    if (duplicatefound) return;
    val = $(item).val();
    if ($('input[value="' + val + '"]').length == 1) return;
    duplicatefound = true;
    alert('There are similar values');
});

​
Alternative solution in case you need to capture some or all of the duplicate values (Working fiddle here):

var collection = $('input');
var duplicates = $.map(collection, function(item){
    val = $(item).val();
    return ($('input[value="' + val + '"]').length > 1) ? val : null;
});

if(duplicates.length > 0) alert('There are similar values');

---

As others have mentioned, you were missing a declaration of vals as an array, therefore, .push() was failing.

You might find an object based solution to be more elegant: Working fiddle

var vals = {};

$('input').each(function() {
    var index = $(this).val();
    if (vals[index])
    {
        vals[index]++
    }
    else
    { 
        vals[index] = 1;
    }
});

var duplicates = $.map(vals, function(val, key){
    return (val > 1) ? key : null;
});

if (duplicates.length > 0) alert('There are duplicates!');