How to check duplicate value in inputs using jQuery

Question

I have a html table and there is input in it. I want to check duplicate value in a custom column or In the other hand Non Dupllicated td value.

<table>
    <tr><td><input value="one"/></td></tr>
    <tr><td><input value="two"/></td></tr>
    <tr><td><input value="one"/></td></tr>
    <tr><td><input value="nine"/></td></tr>
    <tr><td><input value="four"/></td></tr>
</table>

I want check all input in td and if a value duplicated display error. For example in top code one is duplicated. I don't want to use for().

http://stackoverflow.com/questions/37749385/jquery-validation-for-duplicates-in-form-array — Midas, Jun 12 '16 at 12:21

Mohammad · Answer 1 · 2016-06-12T11:49:31.580

18

Using each() check value of inputs and if any value is duplicate add class duplicate to it.

var arr = [];
$("input").each(function(){
    var value = $(this).val();
    if (arr.indexOf(value) == -1)
        arr.push(value);
    else
        $(this).addClass("duplicate");
});

.duplicate {
    border: 1px solid red;
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><td><input value="one"></td></tr>
    <tr><td><input value="two"></td></tr>
    <tr><td><input value="one"></td></tr>
    <tr><td><input value="nine"></td></tr>
    <tr><td><input value="four"></td></tr>
    <tr><td><input value="four"></td></tr>
</table>

edited Jun 12 '16 at 11:49

answered Jun 12 '16 at 11:14

Mohammad

21,175
15
55
84

I don't want make a distinct table ,I want that exist duplicate value has error – Mohsen Zahedi Jun 12 '16 at 11:33
@MohsenZahedi Write your opinion about my answer. – Mohammad Jun 12 '16 at 12:19
@MohsenZahedi What is meaning of `not work`? In snippet or in your local? – Mohammad Jun 12 '16 at 13:37

score 4 · Answer 2 · answered Jun 12 '16 at 12:11

Try this one

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
        <tr><td><input value="one"></td></tr>
        <tr><td><input value="two"></td></tr>
        <tr><td><input value="one"></td></tr>
        <tr><td><input value="nine"></td></tr>
        <tr><td><input value="four"></td></tr>
    </table>

<script>
$("input").change(function(){
    var x=$(this).val();
    var z=0;
    $("input").each(function(){
        var y=$(this).val();
        if(x==y){
            z=z+1;
        }
    });
    if(z>1){
        alert(x);
    }
 })
 </script>

 </body>
</html>

score 0 · Answer 3 · edited Nov 18 '19 at 09:01

0

Please check using this code

$("input").on("change",function(){
   var arr = new Array();
   $("input").each(function(){
                        arr.push($(this).val());
   });
   for(var i=0; i<arr.length;i++){
       for(var j=i+1;j<arr.length;j++){
          if(arr[i]==arr[j]){
              alert("Already Exist"); 
              return;
          }
       }
   }         
})

edited Nov 18 '19 at 09:01

Jayakumar Thangavel

1,884
1
22
29

answered Nov 18 '19 at 07:46

kamran khan

1

It will be bit helpful if you can give small description about you approach. – CodeGuru Nov 18 '19 at 08:01

score 0 · Answer 4 · answered Sep 06 '22 at 21:34

I used JQuery to check two columns on duplicates, starting off by hiding rows that do not contain:

     $("#webGrid tr > td.TrailerNumber:not(:contains('" + CurrentTrailerNumber 
 + 
 "'))").parent().hide(); //Hide rows on TrailerNumber that don't match.
            $("#webGrid tr > td #CarrierNameLbl:not(:contains('" + 
 CurrentCarrrierNameLbl + "'))").parent().closest('TR').hide(); //Hide Rows 
 that don't contain value.

You can also test the length of strings to validate:

 //Test lengths to determine if an exact match. 
            if ($('#webGrid tbody > tr > td #TrailerNumber').val().length > TrailerNumberLength || $('#webGrid tbody > tr > td #TrailerNumber').val().length != TrailerNumberLength) {
                $('#webGrid TR').parent().closest('TR').hide();
            };

            if ($('#webGrid tbody > tr > td #CarrierName').val().length > CurrentCarrierNameLength || $('#webGrid tbody > tr > td #CarrierName').val().length != CurrentCarrierNameLength) {
                $('#webGrid TR').parent().closest('TR').hide();
            };

How to check duplicate value in inputs using jQuery

4 Answers4