Поле ввода формы не распознается в jquery

Question

У меня есть эта форма поиска для публикации с использованием jQuery:

<form id="search-article-form" method="post">
    <input type="hidden" name="token" value="LSN71T8CeWr">
    <input id="searcharticle" type="text" placeholder="search..."
        name="searcharticle">
</form>

Фрагмент jQuery:

$(function () {
  $('#searcharticle').keyup(function() {      
      var form = $('#search-article-form');  
      console.log('form:', form.serialize());

      $.ajax({
          type: "POST",
          url: "/search/article/",
          data: form.serialize(),

          success: searchSuccess,
          dataType: 'html'
      });
  });
});

function searchSuccess(data, textStatus, jqXHR) {
  console.log('data:', data);
  $('#search-results').html(data);
}

Проблема в том, что форма, кажется, не сериализована должным образом, поэтому keyup Я вижу только следующее в консоли:

form: token=LSN71T8CeWr

Также на стороне сервера, полученные параметры сообщения являются пустыми.

Так интересно, что здесь не так и как это исправить?

Answer 1

Отлично работает в прикрепленном фрагменте

$(function () {
  $('#searcharticle').keyup(function() {      
      var form = $('#search-article-form');  
      console.log('form:', form.serialize());

  });
});

function searchSuccess(data, textStatus, jqXHR) {
  console.log('data:', data);
  $('#search-results').html(data);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="search-article-form" method="post">
    <input type="hidden" name="token" value="LSN71T8CeWr">
    <input id="searcharticle" type="text" placeholder="search..."
        name="searcharticle">
        
</form>