skip to Main Content

I am developing a point of sale system. Using Javascript, the below code can add a row to my shopping table. However, with button, I can add duplicates of stock to shopping table. So I am considering a situation whereby instead of duplicating same item in rows, the insert query will be not execute. Rather the quantity of the existing row will increase by one. by these, if I scan two pieces of same item, I will only have one row with the quantity cell having 20 value.

For instance, If I select Result 1 twice, it shouldn’t insert Result 1 in two different rows but one row with the quantity reading 2.

You can demonstrate the code without my Ajax page.

$(document).ready(function() {
  $(document).on('click', '.btnaddstockTransfer', function() {
    var html = '';
    html += '<tr>';
    html += '<td><div class="search-box"><input id="stock" class="form-control is-warning stock" type="text" name="stock[]" placeholder="Search by name or code"><div class="result"></div></div></td>';
    html += '<td><input class="form-control qty" type="text" name="qty[]" required size="2"></td>';
    html += '</tr>';

    $('#stockTransfer').append(html);

    // Live Search 

    $(document).on('keyup input', '.search-box input[type="text"]', function() {
  /* Get input value on change */
  var inputVal = $(this).val();
  var resultDropdown = $(this).siblings(".result");
  if (inputVal.length) {
    //just dummy data for example purposes:
      resultDropdown.html("<p>Result 1</p><p>Result 2</p>");
    /*$.get("backend-search.php", {
      term: inputVal
    }).done(function(data) {
      // Display the returned data in browser
      resultDropdown.html(data);
    });*/
  } else {
    resultDropdown.empty();
  }
});

    // Set search input value on click of result item
    $(document).on("click", ".result p", function() {

      var stock = $(this).text();
      $(this).parents(".search-box").find('.stock').val(stock);
      var tr = $(this).parent().parent().parent().parent();
      $(this).parent(".result").empty();
       tr.find(".qty").val(1);

      table = document.getElementById("stockTransfer");
      var rows = table.rows;
      for (var i = 1; i < rows.length; i++) {
        var cols = rows[i].cells;
        for (var c = 0; c < cols.length; c++) {
          if (cols[c].innerText == stock) {
            //return cols[0].innerHTML;
            tr.find(".qty").val() ++;

          }
        }
      }
    })
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<button class="btnaddstockTransfer" type="button">
        Add stock transfer
    </button>
<div style="overflow-x:auto">
  <table id="stockTransfer" class="table">
    <thead>
      <tr>
        <th style="color:blue">Search Product's(Name/Code)</th>
        <th style="color:blue">Quantity</th>

      </tr>
    </thead>
    <tbody>
      <tr>
      </tr>
    </tbody>
  </table>
</div>

2

Answers


  1. You can’t use ++ with a function call, it can only be applied to a variable or an expression that references an object property. So change

    tr.find(".qty").val() ++;
    

    to

    tr.find(".qty")[0].value++;
    

    Indexing a jQuery object returns the corresponding DOM element. This then allows you to refer directly to its value property, rather than calling a function.

    Also, when creating the input field, you need to give it an initial value so you can increment it. Put value="0" in the HTML.

    $(document).ready(function() {
      $(document).on('click', '.btnaddstockTransfer', function() {
        var html = '';
        html += '<tr>';
        html += '<td><div class="search-box"><input id="stock" class="form-control is-warning stock" type="text" name="stock[]" placeholder="Search by name or code"><div class="result"></div></div></td>';
        html += '<td><input class="form-control qty" type="text" name="qty[]" required size="2" value="0"></td>';
        html += '</tr>';
    
        $('#stockTransfer').append(html);
    
        // Live Search 
    
        $(document).on('keyup input', '.search-box input[type="text"]', function() {
          /* Get input value on change */
          var inputVal = $(this).val();
          var resultDropdown = $(this).siblings(".result");
          if (inputVal.length) {
            //just dummy data for example purposes:
            resultDropdown.html("<p>Result 1</p><p>Result 2</p>");
            /*$.get("backend-search.php", {
              term: inputVal
            }).done(function(data) {
              // Display the returned data in browser
              resultDropdown.html(data);
            });*/
          } else {
            resultDropdown.empty();
          }
        });
    
        // Set search input value on click of result item
        $(document).on("click", ".result p", function() {
    
          var stock = $(this).text();
          console.log(stock);
          $(this).parents(".search-box").find('.stock').val(stock);
          var tr = $(this).closest("tr");
          $(this).parent(".result").empty();
    
          table = document.getElementById("stockTransfer");
          var rows = table.rows;
          for (var i = 1; i < rows.length; i++) {
            console.log(`row ${i}`);
            var cols = rows[i].cells;
            for (var c = 0; c < cols.length; c++) {
              console.log(`col ${c}, ${cols[c].innerText}`);
              if (cols[c].innerText == stock) {
                //return cols[0].innerHTML;
                tr.find(".qty")[0].value++;
    
              }
            }
          }
        })
      });
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <button class="btnaddstockTransfer" type="button">
            Add stock transfer
        </button>
    <div style="overflow-x:auto">
      <table id="stockTransfer" class="table">
        <thead>
          <tr>
            <th style="color:blue">Search Product's(Name/Code)</th>
            <th style="color:blue">Quantity</th>
    
          </tr>
        </thead>
        <tbody>
          <tr>
          </tr>
        </tbody>
      </table>
    </div>
    Login or Signup to reply.
  2. To ensure that duplicates of the same item are not added to different rows and that the quantity of an existing row is increased instead, we need to modify the code to check if the item already exists in the table before adding a new row. If the item exists, we simply increase the quantity of the existing row.

    $(document).ready(function() {
      $(document).on('click', '.btnaddstockTransfer', function() {
        var html = '';
        html += '<tr>';
        html += '<td><div class="search-box"><input id="stock" class="form-control is-warning stock" type="text" name="stock[]" placeholder="Search by name or code"><div class="result"></div></div></td>';
        html += '<td><input class="form-control qty" type="text" name="qty[]" required size="2" value="1"></td>';
        html += '</tr>';
    
        $('#stockTransfer tbody').append(html);
    
        // Live Search 
        $(document).on('keyup input', '.search-box input[type="text"]', function() {
          /* Get input value on change */
          var inputVal = $(this).val();
          var resultDropdown = $(this).siblings(".result");
          if (inputVal.length) {
            //just dummy data for example purposes:
            resultDropdown.html("<p>Result 1</p><p>Result 2</p>");
            /*$.get("backend-search.php", {
              term: inputVal
            }).done(function(data) {
              // Display the returned data in browser
              resultDropdown.html(data);
            });*/
          } else {
            resultDropdown.empty();
          }
        });
    
        // Set search input value on click of result item
        $(document).on("click", ".result p", function() {
          var stock = $(this).text();
          var tr = $(this).closest('tr');
          var qtyInput = tr.find('.qty');
    
          // Check if the stock item already exists in the table
          var exists = false;
          $('#stockTransfer tbody tr').each(function() {
            var currentRowStock = $(this).find('.stock').val();
            if (currentRowStock === stock) {
              exists = true;
              var currentQty = $(this).find('.qty').val();
              $(this).find('.qty').val(parseInt(currentQty) + 1);
            }
          });
    
          if (!exists) {
            $(this).parents(".search-box").find('.stock').val(stock);
            qtyInput.val(1); // Set default quantity to 1
          } else {
            tr.remove(); // Remove the newly added empty row if item already exists
          }
    
          $(this).parent(".result").empty();
        });
      });
    });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <button class="btnaddstockTransfer" type="button">
      Add stock transfer
    </button>
    <div style="overflow-x:auto">
      <table id="stockTransfer" class="table">
        <thead>
          <tr>
            <th style="color:blue">Search Product's(Name/Code)</th>
            <th style="color:blue">Quantity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
          </tr>
        </tbody>
      </table>
    </div>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search