• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Finding Duplicate Input Elements Using jQuery

March 21, 2011 //  by Krishna Srinivasan//  Leave a Comment

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
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>

<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>

<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 >

<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.

Category: jQueryTag: jQuery

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « JSON response from JavaFX HTTP Request
Next Post: New Features in CSS 3.0 »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact