Как преобразовать данные формы в объект JavaScript с помощью jQuery?

Решение: преобразование данных формы в объект с помощью jQuery

Вы столкнулись с типичной задачей. Метод .serialize() возвращает строку в формате URL-encoded, а .serializeArray() — массив объектов вида {name: "field", value: "val"}. Чтобы получить плоский объект, нужно выполнить дополнительную обработку. Вот несколько проверенных способов.

Способ 1: Использование $.serializeArray() и ручной сборки объекта

Самый простой и понятный для новичка вариант — пройтись по массиву, полученному из .serializeArray(), и собрать объект:

function formToObject(formSelector) {
  var data = {};
  $.each($(formSelector).serializeArray(), function(i, field) {
    data[field.name] = field.value;
  });
  return data;
}

// Использование:
var formData = formToObject('#feedback-form');
console.log(formData); 
// { username: "Иван", email: "ivan@example.com", message: "Привет!", agree: "on" }

Обратите внимание: значение чекбокса будет строкой "on", если он отмечен. Чтобы получить булево значение, нужно добавить проверку:

if (field.type === 'checkbox') {
  data[field.name] = $(field).is(':checked');
} else {
  data[field.name] = field.value;
}

Способ 2: Использование $.fn.serializeObject() (плагин или самописный)

Многие разработчики создают небольшой плагин или просто функцию, которая делает то же самое, но более элегантно. Вот популярная реализация:

$.fn.serializeObject = function() {
  var obj = {};
  var formArray = this.serializeArray();
  
  $.each(formArray, function() {
    if (obj[this.name] !== undefined) {
      if (!obj[this.name].push) {
        obj[this.name] = [obj[this.name]];
      }
      obj[this.name].push(this.value || '');
    } else {
      obj[this.name] = this.value || '';
    }
  });
  
  return obj;
};

// Использование:
var formData = $('#feedback-form').serializeObject();
console.log(formData);

Этот метод автоматически обрабатывает поля с одинаковыми именами (например, множественные чекбоксы или select multiple), превращая их в массивы.

Способ 3: Использование FormData (нативный JS, без jQuery)

Если вы не привязаны к jQuery, можно использовать встроенный объект FormData и преобразовать его в объект:

function formToObject(formElement) {
  var formData = new FormData(formElement);
  var object = {};
  formData.forEach(function(value, key) {
    // Если ключ уже существует, преобразуем в массив
    if (Reflect.has(object, key)) {
      if (!Array.isArray(object[key])) {
        object[key] = [object[key]];
      }
      object[key].push(value);
    } else {
      object[key] = value;
    }
  });
  return object;
}

// Использование:
var formEl = document.getElementById('feedback-form');
var formData = formToObject(formEl);
console.log(formData);

Рекомендации

• Для простых форм — используйте способ 1 (ручная сборка). Он прозрачен и легко модифицируется.
• Для сложных форм с вложенными полями (например, user[name], user[email]) — потребуется рекурсивная обработка. Готовые решения можно найти в npm-пакетах типа jquery-serialize-object.
• Не забывайте про типы данных: числа, даты, чекбоксы. Приведённые выше функции возвращают только строки. Для конвертации типов добавьте логику, например, для чисел используйте parseFloat(value).

Надеюсь, это поможет! Если остались вопросы — пишите в комментариях.

const formToObject = form => 
  Array.from(new FormData(form).entries())
    .reduce((obj, [key, value]) => {
      if (obj[key]) {
        obj[key] = Array.isArray(obj[key]) 
          ? [...obj[key], value] 
          : [obj[key], value];
      } else {
        obj[key] = value;
      }
      return obj;
    }, {});

// Использование:
const form = document.getElementById('feedback-form');
const data = formToObject(form);
console.log(data);