Поиск по json, как получить массив с добавленными к динамической таблице данными?

Question

Сама проблема: в результате поиска по json документу к найденной строке необходимо добавить парочку дополнительных ячеек:

1) цифру 1..99 и 2) небольшое текстовое примечание, а кнопкой "go" получить всю строку с добавленным примечанием, например:

    | B11 | Ручка WB11 | 39 | ФИО,тел | 

Но получаю только пустой массив: Array(), как быть, может это реализовывается как-то не так?

p.s. json документ в упрощенном виде такой: [{"artikul":"A13","name":"Ручка WA13"}, .... }]

А обработчик res.php такой:

    `echo "<pre>";
    print_r($_POST);
    echo "</pre>";`

Результат на картинке

 $(window).load(function(){
  $('#search').keyup(function(){
var searchField = $('#search').val();
   var regex = new RegExp(searchField, "i");

   $.getJSON('data.json', function(data) {
var output = '<form id="formx" method="post" action="javascript:void(null);" onsubmit="call()">'; 
$.each(data, function(key, val){
 if ((val.name.search(regex) != -1) || (val.artikul.search(regex) != -1)) {
  output += '<span>' + val.artikul + ' </span>';
  output += ' <span>'+ val.name +' </span>';
  output += '<span><input type="text" class="mytext"><input type="submit" value="Выбрать"></span><br />';
 }
});  
  output += '</form>';
  $('#update').html(output); // это вывод общей таблицы

});

  });
 });
/* 
3) попытка получить из найденного массив без перезагрузки
*/
function call() {
    var msg   = $('#formx').val();
        $.ajax({
          type: 'POST',
          url: 'res.php',
          data: msg,
          success: function(data) {
            $('#results').html(data);
          },
          error:  function(xhr, str){
   alert('Возникла ошибка: ' + xhr.responseCode);
          }
        });
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input class="instyle" type="search" name="search" id="search" autofocus />

<div id="update">вывод поиска</div>
<div id="results">вывод полной строки</div>

Answer 1

Не используйте элемент form и кнопку submit там, где Вам не нужно посылать на сервер всю форму:

$(window).load(function(){
  $('#update').on('click', '.choose', function(e) {
    var parentRow = $(this).closest('.row');
    $.ajax({
      type: 'POST',
      url: 'res.php',
      data: {
        artik: parentRow.find('.artik').val(),
        nam: parentRow.find('.nam').val(),
      },
      success: function(data) {
        $('#results').html(data);
      },
      error:  function(xhr, str){
        alert('Возникла ошибка: ' + xhr.responseCode);
      }
    });
  });

  $('#search').keyup(function(){
    var searchField = $('#search').val();
    var regex = new RegExp(searchField, "i");       
    $.getJSON('data.json', function(data) {
      var output = '<div id="formx">';  
      $.each(data, function(key, val) {
        if (val.name.search(regex) != -1 || val.artikul.search(regex) != -1) {
          output += '<div class="row">';
          output += ' <input class="artik" type="text" value="' + val.artikul + '"/>';
          output += ' <input class="nam" type="text" value="'+ val.name +'"/>';
          output += ' <input class="cena mytext" type="text"/>';
          output += ' <button type="button" class="choose">Выбрать</button>';
          output += '</div>';
        }
      });       
      output += '</div>';
      $('#update').html(output); // это вывод общей таблицы
    });
  });
});