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

Оффтоп javascript
1

Как мне преобразовать все элементы моей формы в JavaScript объект?

Я хотел бы найти способ автоматически создать JavaScript объект из моей формы, без необходимости перебора каждого элемента по отдельности. Мне не нужна строка, которую возвращает $(‘#formid’).serialize();, и не подходит массив объектов, который возвращает $(‘#formid’).serializeArray();.

Для меня важно получить именно JavaScript объект, где ключи представляют собой имена полей формы, а значения - введенные пользователем данные. Есть ли автоматизированный метод для этого?

// Я ожидаю получить подобный результат:
var userData = {
  username: 'john_doe',
  email: '[email protected]',
  age: '25'
};

Какой наилучший способ добиться такого результата с помощью jQuery?

2

можно еще проще - создать функцию которая сразу возвращает готовый объект. я обычно так делаю:

function formToObject(formId) {
    var result = {};
    $(formId + ' input, ' + formId + ' select, ' + formId + ' textarea').each(function() {
        if (this.name) {
            result[this.name] = this.value;
        }
    });
    return result;
}

var userData = formToObject('#formid');

так удобнее - не зависит от serializeArray() и легко добавить проверки или обработку специальных полей.

3

Проще всего через serializeArray() и потом в объект через reduce(). Вот так:

var formData = {};
$('#formid').serializeArray().forEach(function(field) {
    formData[field.name] = field.value;
});

Или короче с reduce:

var formData = $('#formid').serializeArray().reduce(function(obj, field) {
    obj[field.name] = field.value;
    return obj;
}, {});

Работает отлично, сам постоянно так делаю.

4

А я использую новый FormData конструктор - очень просто:

var formData = Object.fromEntries(new FormData(document.getElementById('formid')));

Только проверьте, что у всех полей есть атрибут name. Работает быстро и без циклов.