Многошаговые формы без лишних сложностей

𝗠𝘂𝗹𝘁𝗶-𝘀𝘁𝗲𝗽 𝗳𝗼𝗿𝗺𝘀 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝘁𝗵𝗲 𝗼𝘃𝗲𝗿𝗵𝗲𝗮𝗱

Большинство форм используют метод POST. Мало кто использует метод GET. GET добавляет данные в конец вашего URL.

Используйте GET для передачи данных между страницами. Вам не нужен бэкенд для хранения данных. Вам не нужен JavaScript, чтобы показывать или скрывать поля. Используйте встроенные возможности браузера.

• Создавайте форму на основе статических страниц.
• Используйте данные из строки запроса для логики.
• Показывайте определенные поля на основе предыдущих ответов.

Используйте этот скрипт для передачи данных между страницами. Он создает скрытые поля на основе URL.

window.onload = function() {
  var querystring = window.location.href.split('?')[1];
  var parameters = querystring.split('&');

  for(i = 0; i < parameters.length; i++) {
    var pair = parameters[i].split('=');
    var hiddenfield = document.createElement("input");
    hiddenfield.type = "hidden";
    hiddenfield.name = pair[0];
    hiddenfield.value = pair[1];
    document.forms[0].appendChild(hiddenfield);
  }
};

В конце отправьте итоговые данные на ваш сервер с помощью POST-запроса. Данные остаются в браузере.

Имейте в виду следующее:

• Данные отображаются в URL.
• Не используйте это для паролей.
• Пользователи могут делиться URL-адресами, содержащими их данные.

Источник: https://dev.to/ovidem/multi-step-form-without-the-overhead-5bjc