How to (search) and load a specif data(by id) into a dynamic created row, using node.js

user_14297735 0
Viewed 47

First I will create a new row in a HTML dynamic table. I have used JavaScript to create and remove rows from the table. Once the row is inserted and I would like to search by ID that the user request and then load some data accordingly. For example the name and price. And then he will be able to quantify and/or add more rows(items). At the end saving as an order.

router.get:

router.get('/searching', function(req,res){
    var sql = req.query.sku;
//call MySQL Query. and //extract key using req.query.key
    db.query('SELECT * FROM item_new WHERE sku= '+sql,
    function(err, rows, fields) {
      if (err) throw err;
      console.log(rows);
      res.json(rows[0]);
    });
});

HTML page

<form id="filterForm" action="/user/searching" method="GET">
<input id="filter" class="typeahead tt-query" spellcheck="false" autocomplete="off" name="sku" type="text" placeholder="type Sku">
<input type="submit">
</form>

but I want to display the results on the index page and I don't want to go to a new page when a submit.

express node.js mysql html
1 Answers

I would suggest to use a div instead of form

<div id="filterForm"><input id="filter" class="typeahead tt-query" spellcheck="false" autocomplete="off" name="sku" type="text" placeholder="type Sku"><input id="submitBtn" type="submit"></div></td>

Next cell showing results with some id=:

<td id='itemName'></td>

I know that is not the best solution but it should at least work (script)

let buttons = document.querySelectorAll('#submitBtn');
  for (let button of buttons) {
    button.addEventListener('click', async function(e) {
      let sku = e.target.closest('tr').querySelector('#filter').value;
      let item = await fetch('http://localhost:3000/user/searching?sku='+sku);
      item = await item.json();
      console.log(item.item_name);
      e.target.closest('tr').querySelector('#itemName').textContent = item.item_name;
user_142854700
Related