CODEWITHSUNDEEP
javascriptjquery
Teddybugs
Teddybugs

Reputation: 1244

Jquery: check duplicated value against same input name

i have multiple hidden input like this:

<input type="hidden" value="4531" name="product_id">
<input type="hidden" value="4532" name="product_id">
<input type="hidden" value="4533" name="product_id">

how do i check if its value is duplicated on form submit, my jquery code as below (not working):

$(".btnSubmit").click(function() {
var errorCounterDupInput = 0;
$("input[name='product_id']").each(function (i,el1) {
                var current_val = $(el1).val();
                console.log("current_val : "+current_val);
                if (current_val != "") {
                    $("input[name='product_id']").each(function (i,el2) {
                        if ($(el2).val() == current_val && $(el1).attr("name") != $(el2).attr("name")) {
                            errorCounterDupInput = errorCounterDupInput+1;                            
                        }
                    });
                }
            });
});

the output of errorCounterDupInput is always 0 even i have duplicated item like this:

<input type="hidden" value="4531" name="product_id">
<input type="hidden" value="4531" name="product_id">
<input type="hidden" value="4531" name="product_id">

any idea?

Upvotes: 0

Views: 2410

Answers (3)

Neil Villareal
Neil Villareal

Reputation: 637

You may want to try this one:

$(".btnSubmit").click(function() {
var errorCounterDupInput = 0;
$("input[name='product_id']").each(function (i,el1) {
                var current_val = $(el1).val();
                if (current_val != "") {
                    $("input[name='product_id']").each(function (j,el2) {
                        if ($(el2).val() == current_val && i != j) {
                            errorCounterDupInput = errorCounterDupInput+1;                           

                        }
                    });
                }
            });


console.log(errorCounterDupInput);
});

You code is fine but just need a little changes. Please see above changes.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

Would suggest an array approach where you can check if a value already exists in the array. Won't require complicated conditionals and only requires passing over elements once

$(".btnSubmit").click(function() {
     var errorCounterDupInput = 0, hiddenVals =[]
     $("input[name='product_id']").each(function (i,el1) {
          var val = this.value;
          if(!val.length){
             return
          }
          if($.inArray(val, hiddenVals) == -1){
              // isn't already in array so add it to array
              hiddenVals.push(val);
          }else{
            //is in array, increment error count
            errorCounterDupInput ++;
            // can quit now if want by using "return false;"
          }
     })
})

Upvotes: 0

trex005
trex005

Reputation: 5115

There are two problems here.

  1. you are requiring the name attributes to be different for it to be a duplicate, ($(el1).attr("name") != $(el2).attr("name")) and you are already ensuring they are the same with your jQuery selector. So there will be no duplicates.
  2. You are comparing each element against all of the elements, including itself each loop, so even when you fix the name bug, you are going to be getting way more duplicates than you actually have.

I suggest while looping through the elements, you cache their values and only compare new values against the existing cache, so you will get an accurate picture of your duplicate count.

$(".btnSubmit").click(function () {
    var errorCounterDupInput = 0;
    var product_ids = [];
    $("input[name='product_id']").each(function (i, el1) {
        var current_val = $(el1).val();
        console.log("current_val : " + current_val);
        if (current_val != "") {
            if(product_ids.indexOf(current_val) === -1){
                product_ids.push(current_val);
            } else {
                errorCounterDupInput++;
            }
        }
    });
    console.log(errorCounterDupInput);
});

Fiddle: http://jsfiddle.net/trex005/Lnogg68v/

Upvotes: 2

Related Questions