Formularze wielokrokowe bez zbędnego narzutu
Większość formularzy korzysta z metody POST. Mało osób używa metody GET. GET dodaje dane na końcu adresu URL.
Użyj GET, aby przekazywać dane między stronami. Nie potrzebujesz backendu do przechowywania danych. Nie potrzebujesz JavaScriptu, aby pokazywać lub ukrywać pola. Skorzystaj z wbudowanych funkcji przeglądarki.
- Zbuduj formularz przy użyciu statycznych stron.
- Użyj danych z query string do logiki.
- Pokazuj konkretne pola na podstawie poprzednich odpowiedzi.
Użyj tego skryptu, aby przekazywać dane między stronami. Tworzy on ukryte pola na podstawie adresu 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); } };
Na samym końcu wyślij końcowe dane na swój serwer za pomocą żądania POST. Dane pozostają w przeglądarce.
Pamiętaj o tych kwestiach:
- Dane są widoczne w adresie URL.
- Nie używaj tego do haseł.
- Użytkownicy mogą udostępniać adresy URL wraz ze swoimi danymi.
Źródło: https://dev.to/ovidem/multi-step-form-without-the-overhead-5bjc