Не удается захватить сериализованное значение текстовой области

Question

Этот код работает нормально для захвата значений элементов input и select. Однако textarea не может быть захвачено. Кто-нибудь знает, что не так и как это исправить?

window.onload = function() {
  $(".update_row_data").change(function() {
    action = $(this).closest('tr').data('action');
    form_data = $(this).closest('tr').find('input,select,textarea').serialize();
    console.log(form_data);

    $.ajax({
      data: {
        //Use that action name in ajax request.
        action: action,
        form_data: form_data,
      },
      url: 'updates_ok.php',
      type: 'post',
      beforeSend: function() {},
      success: function(data) {
        if (data == 1) {
          alert('update sucessful')
        }
      }
    });
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" align="center" style="table-layout:fixed">
  <tbody id="_editable_table">
    <tr data-action="update_data">
      <td>
        <input name="country" size="6" style="border-style:none" type="text" class="update_row_data country" value="">
      </td>
      <td>
        <textarea name="city" size="8" style="border-style:none" class="update_row_data city"></textarea>
      </td>
    </tr>
  </tbody>
</table>