Как выбрать и извлечь данные из формы, представленной с помощью AJAX, которая среди других форм с тем же именем класса?

Question

Я написал код (который я должен признать - это рабочий процесс), который оборачивает форму индивидуально для каждой ячейки в таблице.Форма будет отправлена ​​нажатием Enter Таким образом, каждая ячейка в таблице будет мини-формой, и количество ячеек может варьироваться в зависимости от переменных базы данных.

Короче говоря, это раздел кодаэто создает форму:

$output .= '
                    <td><form class="submit_results" onsubmit="return submit_results();"><input class="hidden" name="result_id" value="'.$result_id.'"><input class="hidden" name="m_analysis_id" value="'.$row2.'"><input class="hidden" name="order_id" value="'.$order_id.'"><input class="hidden" name="sample_id" value="'.$sam_id.'"><input name="result" placeholder="'.$input4['m_analysis'].'" value="'.$input5['result'].'"><input class="hidden" type="submit"></form></td>'; 

Теперь я хочу иметь возможность отправить форму, то есть ячейку, в которую пользователь вводит значение в ячейку, индивидуально, используя AJAX, следующим образом:

    function submit_results() {
     $.ajax({
      type: "POST",
      url: "../server/insert_tests.php?submit_results",
      data: $('form').serialize(),
      success: function(message){
        $('#success').html(message).fadeIn('fast').delay(3000).fadeOut('slow');

        var display_analyses = $("#order_id").val();
        var url4 = "../server/insert_tests.php?display_full_results=";

        $.ajax({
          type: "GET", 
          url: url4 + display_analyses,             
          success: function(data) {
            $("#full_table_results").html(data);
          }
        });
      }
    });
     event.preventDefault();
   }

Однако часть кода data: $('form').serialize(), извлекает данные только из последнего form.Я знаю, почему это происходит, вероятно, из-за того, что код не может отличить формы от представленных.Использование классов также не работает, и идентификаторы нельзя использовать, если форма будет сгенерирована в нескольких повторениях.Я пытался:

$(this).closest('form').serialize(),

Но не повезло.Может кто-нибудь предложить решение этой проблемы?

Answer 1

Вместо использования встроенного обработчика событий используйте синтаксис обработки событий jQuery.

Удалите

onsubmit="return submit_results();

и замените функцию submit_results () обработчиком событий, который присоединяется ко всемформы с тем же классом:

$(".submit_results").submit(function(event) { ... });

Тогда внутри этого, когда обработчик выполнится, форма, которая фактически была отправлена, будет представлена ​​как this.Таким образом, вы можете использовать $(this).serialize() для сбора данных из представленной конкретной формы.

Полный код:

PHP:

$output .= '<td><form class="submit_results"><input class="hidden" name="result_id" value="'.$result_id.'"><input class="hidden" name="m_analysis_id" value="'.$row2.'"><input class="hidden" name="order_id" value="'.$order_id.'"><input class="hidden" name="sample_id" value="'.$sam_id.'"><input name="result" placeholder="'.$input4['m_analysis'].'" value="'.$input5['result'].'"><input class="hidden" type="submit"></form></td>';

JS (убедитесь, что это в пределахблок $(document).ready() { ... }), чтобы он не пытался связать события до того, как элементы были отрисованы):

$(".submit_results").submit(function(event) {
  event.preventDefault();

  $.ajax({
      type: "POST",
      url: "../server/insert_tests.php?submit_results",
      data: $(this).serialize(),
      success: function(message){
        $('#success').html(message).fadeIn('fast').delay(3000).fadeOut('slow');

        var display_analyses = $("#order_id").val();
        var url4 = "../server/insert_tests.php?display_full_results=";

        $.ajax({
          type: "GET", 
          url: url4 + display_analyses,             
          success: function(data) {
            $("#full_table_results").html(data);
          }
        });
      }
    });
});

Примечание. Кроме того, вам будет проще работать с нужной вам функциональностью, используя ненавязчивые обработчики событий (вместо этогоиз встроенных), как правило, считается лучшей практикой в ​​современной веб-разработке, так как создает лучшее разделение кода от представления, а также делает код более понятным и более прослеживаемым (вам не нужно искать в HTML десятки событийобработчики, вы можете увидеть все это в одном месте в JS), что должно помочь с отладкой и текущим обслуживанием.