Comparing multiple field values together
Question by jennifer Jolie
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 by vzwick
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!');
