remove duplicate entry from html input boxes in JavaScript/jQuery

Question

I have a fiddle which checks for any duplicate entry entered in html input boxes.

It works in a way that if any duplicate entry is entered in a newly added row or the rows which are already there then the alert message "duplicate" is displayed.

I have used the following script in order to make that happen.

$('input[name*="code"]').each(function() { 
  $(this).change(function(){ 
    let value = $(this).val();
    let count = 0;
    $('input[name*="code"]').each(function() { 
      if ($(this).val() != '' && $(this).val() == value) {
        count++;
        if (count > 1) { alert('duplicate');   }
      }
    });
  });
  $(this).addClass('e');
});
$('#addRow').on('click', function(){
    $('input[name*="code"]:not(.e').each(function() { 
      $(this).change(function(){ 
        let value = $(this).val();
        let count = 0;
        $('input[name*="code"]').each(function() { 
          if ($(this).val() != '' && $(this).val() == value) {
            count++;
            if (count > 1) alert('duplicate');
          }
        });
      });
      $(this).addClass('e');
    });
});

What I am trying to achieve now is when any duplicate entry is entered in html input boxes then it should get disappeared automatically and the text "Please enter different text" left to the row should be displayed, something like this http://jsfiddle.net/zHJSF/

This is what I have tried but it doesn't seem to work.

$('input[name*="code"]').each(function() { 
  $(this).change(function(){ 
    let value = $(this).val();
    let count = 0;
    $('input[name*="code"]').each(function() { 
      if ($(this).val() != '' && $(this).val() == value) {
        count++;
        if (count > 1) { 
            alert('duplicate'); 
            ($(this).val()).stop(false,true).after('&nbsp;&nbsp;<span style="color:red;" class="error">Please enter different text</span>');
            $('.error').delay(600).fadeOut();
            $(this).val('');  
        }
      }
    });
  });
  $(this).addClass('e');
});
$('#addRow').on('click', function(){
    $('input[name*="code"]:not(.e').each(function() { 
      $(this).change(function(){ 
        let value = $(this).val();
        let count = 0;
        $('input[name*="code"]').each(function() { 
          if ($(this).val() != '' && $(this).val() == value) {
            count++;
            if (count > 1) { 
            alert('duplicate'); 
            ($(this).val()).stop(false,true).after('&nbsp;&nbsp;<span style="color:red;" class="error">Please enter different text</span>');
            $('.error').delay(600).fadeOut();
            $(this).val('');  
           }
          }
        });
      });
      $(this).addClass('e');
    });
});

Problem Statement:

I am wondering what changes I should make in the script above so that it get rid of any duplicate entry entered in the html input boxes.

BStill · Accepted Answer · 2020-03-16 21:21:19Z

1

EDIT

This should work. It will get the input values and put them into an array, then check if the value exists in the array.

javascript

$('input[name*="code"]').each(function() { 
   $(this).change(function(){
      let element = this;
      var array = $('input[name*="code"]').map(function() {
         if (this != element)
            return $(this).val()
         return null;
      }).get(); 
      if (array.includes($(this).val())) {
         $(this).val("");
         $(this).attr("placeholder", "Please enter different text");
         $(this).addClass("error");
      } else if ($(this).hasClass("error")) {
         $(this).removeClass("error");
      }
   });
   $(this).addClass('e');
});

css

.error {
  border: 1px solid red;
}

edited Mar 16, 2020 at 21:21

answered Mar 16, 2020 at 20:32

BStill

9231 gold badge10 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

flash Over a year ago

it looks good. I have integrated your code in the fiddle here jsfiddle.net/7d93ha2j/2 and its working in the way I am looking for. I am seeing one minor issue. In the 1st row, if I change CACN to CHPC then the code in 2nd row gets disappeared which is wrong. The code in the 1st row should disappear.

flash Over a year ago

It looks good. I am wondering why did you use $(this).val(""); inside the if block in the script ?

flash Over a year ago

I am wondering whats gonna happen if we don't add this $(this).val(""); in the script ?

flash Over a year ago

What I am thinking is, it will make the input box empty where duplicate code is entered.

BStill Over a year ago

@flash just to delete the input and show the placeholder value. You dont have to do it that way. I missed the part where you were adding a <span> after it to show the warning.

|

Collectives™ on Stack Overflow

remove duplicate entry from html input boxes in JavaScript/jQuery

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related