Remove duplicate input fields with jQuery

Question

I have six input fields where a user enters text strings. These strings cannot be identical so I need to warn the user as soon as duplicate entries have been attempted. I have the following jQuery which nicely alert's the user when there has been duplicate entry. However, I'm trying to remove the input field that was the duplicate, and this code actually removes the first occurrence of the duplicated string. Is it possible to alert the user there has been a duplicate entry and also remove the correct duplicate input field? Thanks for your help

HTML:

<input type="text" class="form-control alldifferent" id="barcode0" name="barcode0" placeholder="barcode 1">
<input type="text" class="form-control alldifferent" id="barcode1" name="barcode1" placeholder="barcode 2">
<input type="text" class="form-control alldifferent" id="barcode2" name="barcode2" placeholder="barcode 3">
<input type="text" class="form-control alldifferent" id="barcode3" name="barcode3" placeholder="barcode 4">
<input type="text" class="form-control alldifferent" id="barcode4" name="barcode4" placeholder="barcode 5">
<input type="text" class="form-control alldifferent" id="barcode5" name="barcode5" placeholder="barcode 6">

jQuery:

 $(".alldifferent").keyup(function() {
      var val = $(this).val();
      if (val != '') {
          $(".alldifferent").not(this).each(function() {
              if ($(this).val() == val) {
                  alert("Error, Duplicate Barcode " + val);
                  val = $(this).val('');
                  return false; // stop the loop
              }
          });
      }
  });

Fiddle: click here

"I'm trying to remove the input field that was the duplicate" - You mean that you want to clear the value from that field, not remove the input field itself, right? (And are you sure that keyup is the best event to use? "abc" and "abcde" are different values, but your code wouldn't let the user type "abcde" because it would stop them at "abc".) — nnnnnn
– nnnnnn, Commented Apr 24, 2016 at 1:39
Yes. I'm aware of this issue. however the user will be scanning this string using a USB barcode scanner so I don't think it should be an issue.. If you can think of an alternative solution I would greatly appreciate it. Thanks! — webDevleoper101
– webDevleoper101, Commented Apr 24, 2016 at 1:45
You can use keyup, but youll need a timer to avoid the issue @nnnnnn brings up — Wesley Smith
– Wesley Smith, Commented Apr 24, 2016 at 3:02

Wesley Smith · Accepted Answer · 2016-04-24 03:15:10Z

Below is how I would do it. Note that I am binding to both keyup and paste. One of the gothchas of keyup alone is that if the user uses the right click context menu to paste (hi grandpa), the event wont be fired. This fixes that. It also uses a timer to prevent the issue that nnnnnn alludes to in the comment above

jsFiddle

// do this with a timer function so that it is called 400 ms after the user finishes typing 
// not after every keystroke which will often lead to annoying behaviour
$(".alldifferent").on('keyup paste',function(){
  var $this = $(this);
  keyupDelay(function() {
    var val = $this.val();
    $this.attr('value', val);
    if (val != '') {
      // get all inputs with this value and and index greater than 0 ( the duplicates ) setting all to ''
      var $dupes = $('input[value="' + val + '"]:gt(0)').val(''); 
      // if we had to empty any, alert the user
      if ($dupes.length > 0) alert('Duplicates are not allowed!');
    }
  }, 400);// delay, adjust as needed
});


// timer function to be used with keyup
var keyupDelay = (function() {
  var timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" class="form-control alldifferent" id="barcode0" name="barcode0" placeholder="barcode 1">
<input type="text" value="" class="form-control alldifferent" id="barcode1" name="barcode1" placeholder="barcode 2">
<input type="text" value="" class="form-control alldifferent" id="barcode2" name="barcode2" placeholder="barcode 3">
<input type="text" value="" class="form-control alldifferent" id="barcode3" name="barcode3" placeholder="barcode 4">
<input type="text" value="" class="form-control alldifferent" id="barcode4" name="barcode4" placeholder="barcode 5">
<input type="text" value="" class="form-control alldifferent" id="barcode5" name="barcode5" placeholder="barcode 6">

Excellent! exactly what I was looking for. Thanks @DelightedD0D

smaili · Accepted Answer · 2016-04-24 03:01:30Z

0

Based on your comments, what I would do is add a tracker that keeps track of the input value to the original input, so that you can compare to see if that was the original one or not.

See here:

var tracker = {};
$(".alldifferent").keyup(function() {
    var val = $(this).val();
    if (val != '') {
        $(".alldifferent").each(function() {
            var input = $(this);
            var thisval = input.val();

            // ignore empty values
            if (thisval.length === 0) return;

            // get the one being tracked
            var trackedInput = tracker[thisval];
            if (trackedInput && !input.is(trackedInput) && trackedInput.val() === thisval) {
                // if we get here, it means this input wasn't the first to have this value
                alert("Error, Duplicate Barcode " + thisval);
                input.val('');
                return;
            }

            // if we get here, it means this value is unique, so add it to the tracker
            tracker[thisval] = input;
        });
    }
});

edited Apr 24, 2016 at 3:01

answered Apr 24, 2016 at 1:22

smaili

1,2359 silver badges19 bronze badges

15 Comments

webDevleoper101 Over a year ago

this removes the entire input field.. I need to clear the input field so user can 'try again'.. is that possible?

nnnnnn Over a year ago

Ignoring the "remove" versus "clear" issue, this code has the same problem as the OP's code, in that it removes the wrong input.

Gaurav Aggarwal Over a year ago

yeah..insted of .remove() use .val('')

smaili Over a year ago

Sorry, I thought you wanted to remove it from the DOM. I've updated my answer for clearing an input.

webDevleoper101 Over a year ago

@smaili have you tested this? because it gives me the same effect as my current code in the question.

|

Collectives™ on Stack Overflow

Remove duplicate input fields with jQuery

2 Answers 2

jsFiddle

1 Comment

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related