Finding Duplicate Input Elements Using jQuery

Introduction

This article deals with finding the input elements with duplicate values. Please find below the screenshot of the sample output. Let us see what all is needed to develop this application. We shall create a web application which has the following files.

FindDuplicates.html
jquery.js

You can download the latest version of jQuery from Download jQuery. Now let us add in code into FindDuplicates.html We shall be adding script , style and html body sections to the html files. Lets deal with each one of these sections one after the other. Please find below the code for the html body section.

Html Body Code

Download Sample Code

Source Code for Duplicate elements in jQuery

<body>
		<center>
			<hr/>
			<b style="font-size:20">Employee Details</b>
			<hr/><br/>
			<h4>Please enter the ids of the employees</h4>
			<b>Employee 1</b><input type="text" id="t11"  /><br/>
			<b>Employee 2</b><input type="text" id="t12"/><br/>
			<b>Employee 3</b><input type="text" id="t13" /><br/><br/>
			<input type="button" id="btn" value="Find Duplicates"/>
		</center>
	</body>

Script Code

Add the following code to the script section. The script code pasted below will import jquery.js and will take care of finding the duplicates

<script src="jquery.js"></script>
		<script>
			$(document).ready(function()
			{
				$("input").removeClass("highlight");
				$("#btn").click(function()
				{
					findDuplicate();
				});
            }
			);
            function findDuplicate()
            {
				var textArr=$("input[type=text][id^=t1]").get();
				var len=textArr.length;
				var inner=0,outer=0,index=0,dupLen=0;
				var dupArr=new Array();
				for(outer=0;outer<len;outer++)
				{
					for(inner=outer+1;inner<len;inner++)
					{
						if(textArr[outer].value==textArr[inner].value)
						{
							if(jQuery.inArray( textArr[outer], dupArr )==-1)
							{
								dupArr.push(textArr[outer]);
							}
							if(jQuery.inArray( textArr[inner], dupArr )==-1)
							{
								dupArr.push(textArr[inner]);
							}
						}
					}
				}
				for(i=0;i< dupArr.length;i++)
				{
					$("#"+dupArr[i].id).addClass("highlight");
				}
			}
		</script>

Style Code

Now add the following code to the style section.

<style>
		.highlight
		{
			border-color:blue;
		}
	</style >

Code Description

Lets try to understand the code.

The code is using the DOM selector “$(‘input[type=text][id^=t1]’)” This expression will retrieve all the input elements with type as “text” and id that begins with “t1”.
In our case, id of all the textboxes begin with t1(ids are t11, t12 and t13). Soon after we get the textboxes, we shall loop across all of them to find out if two or more textboxes have same values. If yes, we shall be adding the textbox element to an array called “dupArr”. Once we are done with getting all the duplicate textbox elements, we shall be adding the styleclass, “highlight” to it. This style class has been defined in the style section which will change the border-color to “blue”.

Conclusion

In this article, we have seen how to find duplicate values using jQuery Framework.