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
1 2 3 4 5 6 7 8 9 10 11 12 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <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.
1 2 3 4 5 6 | <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.