CODEWITHSUNDEEP
javascript
mat1986
mat1986

Reputation: 135

Prevent duplicate values being added from a text box to a list box

I have a textbox where a user scans a barcode then selects an 'add to list' button which adds them to a listbox. I'm trying to modify it to prevent duplicates being added but can't seem to find a way that works.

function addToList(barcode) {

    var barcode = document.getElementById("barcode").value.toUpperCase();
    var opt = document.createElement("option");
        document.getElementById("lstBox1").options.add(opt);            

        opt.text = barcode;
        opt.value = barcode;
        //$('barcode').val('');
        document.getElementById("barcode").value='';
    return false;
}

What would be the best way?

Upvotes: 0

Views: 940

Answers (5)

Harsh tango Gautam
Harsh tango Gautam

Reputation: 3

This is kind of bruteforce method but it will work. Using jQuery it will be much simple.

1.This function will get all the list text

    function getOptTxt() {
        var x = document.getElementById("lstBox1").options.length;
        var txt = [];
        var i;
        for (i = 0; i < x; i++) {
        txt[i] += x.options[i].text;
        }
    }

2. You can check the barcode value ,If it is present in txt array or not if the value is not present in txt array then u can actually add the new option element

    var flag =0
     for (x in txt){
      if(barcode == x.toUpperCase()){
        flag =1
        break;
       }
     }
    if(flag == 0){
      var opt = document.createElement("option");
      document.getElementById("lstBox1").options.add(opt);
     }

Upvotes: 0

James Garcia
James Garcia

Reputation: 186

This is an example you can use keeping some of the elements in memory and using Array.filter as validation strategy. Also you can seen for the filter I am showing an example of Arrow Functions to filter the duplicates.

let list = document.getElementById('lstBox1');
let input = document.getElementById('barcode');
let button = document.getElementById('addOption');

function addToList() {
  let currentOptions = Array.from(list.options);
  let barcode = input.value.toUpperCase();
  let filter = currentOptions.filter(option => option.value == barcode);

  if (filter.length == 0) {
    let opt = document.createElement("option");
    opt.text = barcode;
    opt.value = barcode;
    list.options.add(opt);            
    input.value = '';  
  } else {
    alert('The value is duplicated');
  }
};

button.addEventListener('click', addToList);
<input type="text" id="barcode">
<select name="" id="lstBox1">
  <option value="TEST">TEST</option>
</select>
<button id="addOption">Add Option</button>

Upvotes: 0

random
random

Reputation: 7899

Check whether inputted value already exist in the optionlist. If not present then add the value, else do nothing.

let found;

const submitBtn = document.querySelector('button');

submitBtn.addEventListener('click', function(e) {
    e.preventDefault();
    
    const val = document.querySelector('input').value.toLowerCase();

    if(val.length > 0) {
        const optionsArr  = document.querySelectorAll('select > option');
        found = [...optionsArr].filter((option) => option.value.toLowerCase() === val);
        if(found.length == 0) {
            addToList(val);
        }
    }
});

function addToList(val) {
    const option = document.createElement('option');
    option.value = val;
    option.textContent = val;
    document.querySelector('select').appendChild(option);
}
<input type="text">
<button>Add</button>

<select name="" id="">
    <option value="usa">USA</option>
    <option value="Japan">Japan </option>
</select>

Upvotes: 0

user6680983
user6680983

Reputation:

Check the value is not exist in the list before adding into the list. You can try this

var listbox=document.getElementById("lstBox1")
for(var i; i<listbox.options.length; i++)
{
    if(listbox.options[i].value!=barcode)
    {
       var opt = document.createElement("option");
       opt.text = barcode;
       opt.value = barcode;
       listbox.options.add(opt); 
    }
}

Upvotes: 0

Craig Wayne
Craig Wayne

Reputation: 5068

One possible solution is to keep track of the values entered in an Array

Then by checking if the value exists in the array or not, you can add the value to the dropdown

var allValues = [];
function addToList(){
    var barcodeInput = document.getElementById("barcode");
    var barcode = barcodeInput.value.toUpperCase();
    barcodeInput.value='';
    
    //if this value is already in the array, do nothing
    if( -1 !== allValues.indexOf(barcode) ){
        return;
    }
    
    allValues.push(barcode);
    var opt = document.createElement("option");
    document.getElementById("lstBox1").options.add(opt);            
    opt.text = barcode;
    opt.value = barcode;
    
    return false;   
}
select{
  min-width:100px;
}
<input id="barcode" />
<br/>
<select id="lstBox1"></select>
<br/>
<button onclick="addToList()">Add</button>

Upvotes: 1

Related Questions