Блог

Сначала я создам новую строку в динамической таблице HTML. Я использовал JavaScript для создания и удаления строк из таблицы. Как только строка вставлена, и я хотел бы выполнить поиск по идентификатору, который запрашивает пользователь, а затем соответствующим образом загрузить некоторые данные. Например, название и цену. И тогда он сможет определить количество и / или добавить дополнительные строки (элементы). В конце сохранение в виде заказа.

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-страница

 <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>
  

но я хочу отобразить результаты на индексной странице, и я не хочу переходить на новую страницу при отправке.

Я бы предложил использовать div вместо 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>
  

Следующая ячейка показывает результаты с некоторым идентификатором =:

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

Я знаю, что это не лучшее решение, но оно должно хотя бы работать (сценарий)

 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;