CODEWITHSUNDEEP
javascriptjquery
LearnLaravel
LearnLaravel

Reputation: 403

How to check if ID already exist - JS

When user selects an item, I store the id of the item in a hidden input on the panel. Now when user selects the same item, I want to check if the id already exists on the panel and if it does, I will change the value of quantity from 1 to 2.

How can I achieve this?

PS: With the code below, when the user selects an already existing item on the panel, it append the item again and I keep having duplicates.

function findID(sol)
{
    var products = JSON.parse(sol.dataset.sol);

    if(sol.checked == true)  {
        $('.panel').append(
            '<div class="container" style=" font-size:14px; "> '+
            '<input type="hidden"  value='+products.id+' data-id="'+products.id+'"   name="food_id[]" />'+
            '<table style="width:100%;" class="table" id="tables">'+

            '<tbody id="item_list">'+
            '<tr>'+
            '<td  class="name" >'+products.name+'</td>'+
            '<td><input size="50" type="text"  value="1" class="form-control quantity" id="qty" placeholder=" qty " name="quantity[]"  required/></td>'+
            '</tr>'+
            '</tbody>'+
            '</table>'+
            '</div>'

        )
    }
}

Upvotes: 3

Views: 1147

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

You just need to scan the DOM for the elements you have already added and if it exists find the .quantity element and increase the value. Other wise add it as you already do

function findID(sol) {
  var products = JSON.parse(sol.dataset.sol),
    existing;

  if (sol.checked == true) {
    existing = $('.panel input[data-id="' + ad.id + '"]');

    if (existing.length) {
      // already added, just increase the count
      existing.closest('.container').find('.quantity').val(function(i, value) {
        return parseInt(value, 10) + 1;
      })
    } else {
      // not yet added. Add it now
      $('.panel').append(
        '<div class="container" style=" font-size:14px; "> ' +
        '<input type="hidden"  value=' + ad.id + ' data-id="' + ad.id + '"   name="food_id[]" />' +
        '<table style="width:100%;" class="table">' +

        '<tbody id="item_list">' +
        '<tr>' +
        '<td  class="name" >' + ad.name + '</td>' +
        '<td><input size="50" type="text"  value="1" class="form-control quantity" placeholder=" qty " name="quantity[]"  required/></td>' +
        '</tr>' +
        '</tbody>' +
        '</table>' +
        '</div>'

      )
    }


  }

I have also removed all the id attributes from the elements you add because they have to be unique.

Upvotes: 1

Taplar
Taplar

Reputation: 24965

You can put the ids on the panel as a data element and check them there.

var selectedIds = $('.panel').data('selectedIds') || [];

if (selectedIds.indexOf(newSelectedId) > -1) {
    //id already selected
    //do whatever logic
} else {
    //id not already selected
    selectedIds.push(newSelectedId);
    $('.panel').data('selectedIds', selectedIds);
    //do your other logic
}

Upvotes: 0

Related Questions