Формы: val и serialize

Значение любого поля формы — текстового поля, списка, многострочного поля — читают и меняют методом val(). Чтобы собрать сразу все поля формы, например для отправки на сервер, есть serialize().

Чтение и запись значения

<input id="title" value="Купить хлеб">
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($('#title').val()); // Купить хлеб
 
  $('#title').val('Позвонить Олегу');
</script>

В поле теперь «Позвонить Олегу». Для списка <select> метод val() возвращает значение выбранного пункта, а для флажка нужен prop('checked') из урока об атрибутах.

Обработка отправки

Форма из примера курса — регистрация. Обработчик ставят на событие submit формы, а не на щелчок по кнопке: событие submit происходит при любом способе отправки — кнопкой или клавишей Enter в поле.

<form id="signup">
  <input name="name" placeholder="Имя">
  <input name="email" type="email" placeholder="Почта">
  <select name="plan">
    <option value="free">Бесплатный</option>
    <option value="pro">Pro — $5 в месяц</option>
  </select>
  <label><input name="news" type="checkbox"> Присылать новости</label>
  <button>Зарегистрироваться</button>
</form>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#signup').on('submit', function (event) {
    event.preventDefault();
 
    const $form = $(this);
    console.log('Имя:', $form.find('[name="name"]').val());
    console.log('Тариф:', $form.find('[name="plan"]').val());
    console.log('Новости:', $form.find('[name="news"]').prop('checked'));
  });
</script>

Заполните форму и нажмите кнопку: страница не перезагружается благодаря preventDefault(), а значения полей появляются в выводе.

serialize: все поля одной строкой

serialize() собирает поля с атрибутом name в строку запроса — тот же формат, в котором браузер отправляет форму:

<form id="signup">
  <input name="name" value="Анна">
  <input name="email" value="anna@example.com">
  <label><input name="news" type="checkbox" checked> Присылать новости</label>
</form>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($('#signup').serialize());
  // name=%D0%90%D0%BD%D0%BD%D0%B0&email=anna%40example.com&news=on
</script>

Специальные символы и кириллица закодированы. Такую строку сразу передают в $.post() — об этом урок об AJAX.

serializeArray: массив пар

serializeArray() возвращает массив объектов с ключами name и value. Из него легко сделать обычный объект:

<form id="signup">
  <input name="name" value="Анна">
  <input name="email" value="anna@example.com">
</form>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const data = {};
  for (const field of $('#signup').serializeArray()) {
    data[field.name] = field.value;
  }
 
  console.log(data.name, data.email); // Анна anna@example.com
</script>

То же на обычном JavaScript

val() соответствует свойству value. Вместо serialize() используют new URLSearchParams(new FormData(form)).toString(), вместо serializeArray() — Object.fromEntries(new FormData(form)).

Частая ошибка

Забыть атрибут name у поля. serialize() и serializeArray() пропускают поля без name, и на сервер они не попадают. Не попадают и выключенные поля (disabled), и снятые флажки.

Спасибо, что читаете!