Как получить данные формы с помощью JavaScript/jQuery?

Это несколько придирчивый ответ, но позвольте объяснить, почему это лучшее решение:

• Мы правильно обрабатываем отправку формы, а не нажатие кнопки. Некоторые пользователи предпочитают нажимать Enter в полях, другие используют альтернативные устройства ввода, такие как голосовой ввод или другие устройства для обеспечения доступности. Обрабатывая отправку формы, вы решаете эту задачу для всех.
• Мы извлекаем данные формы из самой формы, которая была отправлена. Если вы измените селектор формы позже, вам не нужно будет обновлять селекторы для всех полей. Кроме того, может быть несколько форм с одинаковыми именами полей. Нет необходимости распутывать это с чрезмерными ID и другими атрибутами, просто отслеживайте вводимые данные на основе отправленной формы. Это также позволяет использовать один и тот же обработчик событий для нескольких форм, если это уместно для вашей ситуации.
• Интерфейс FormData довольно новый, но хорошо поддерживается браузерами. Это отличный способ собрать данные и получить реальные значения из формы. Без него вам придется перебирать все элементы (например, с помощью form.elements) и выяснять, что выбрано, а что нет, какие значения и т.д. Это вполне возможно, если вам нужна поддержка старых браузеров, но интерфейс FormData значительно упрощает задачу.
• Я использую ES6 здесь... это не является обязательным, так что вы можете изменить его обратно, чтобы обеспечить совместимость с ES5, если вам нужна поддержка старых браузеров.

На 2019 год существует более современный способ сделать это:

Для создания URLSearchParams, которые удобны для отправки данных через URL, можно использовать следующий код:

const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

Если вам нужно получить обычный объект, вы можете использовать следующий вариант:

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

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

Самый простой способ, 2022:

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault(); // Отменяем стандартное поведение формы
  const data = Object.fromEntries(new FormData(e.target).entries()); // Собираем данные формы
  console.log(data); // Выводим результат в консоль
});

Вывод:

{ name: 'Stackoverflow' }

Этот код добавляет обработчик события submit к форме. При отправке формы он предотвращает её стандартное поведение, собирает данные формы и выводит их в консоль в виде объекта.

Для получения данных формы в виде объекта вы можете использовать метод .serializeArray(), который возвращает массив объектов с именами и значениями полей формы. Затем можно преобразовать этот массив в объект. Вот пример функции, которая выполняет эту задачу:

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#' + formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

В этой функции formId — это идентификатор вашей формы. Мы создаем пустой объект formObj, затем используем $('#' + formId).serializeArray() для получения массива, где каждый элемент содержит имя и значение соответствующего поля формы. С помощью $.each() мы проходим по этому массиву и добавляем пары "имя-значение" в наш объект formObj, который затем возвращается.

Таким образом, вы получаете удобный способ получить данные формы в формате объекта, который легко использовать в дальнейшем.

Вот действительно простое и короткое решение, которое не требует использования jQuery:

var formElements = document.getElementById("myForm").elements;
var postData = {};
for (var i = 0; i < formElements.length; i++) {
    if (formElements[i].type != "submit") // мы не хотим включать кнопку отправки
        postData[formElements[i].name] = formElements[i].value;
}

Этот код собирает значения всех элементов формы, кроме кнопки отправки, и сохраняет их в объект postData.