𝗠𝘂𝗹𝘁𝗶-𝘀𝘁𝗲𝗽 𝗳𝗼𝗿𝗺𝘀 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝘁𝗵𝗲 𝗼𝘃𝗲𝗿𝗵𝗲𝗮𝗱
Most forms use the POST method. Few people use the GET method. GET adds data to the end of your URL.
Use GET to pass data between pages. You do not need a backend to store data. You do not need Javascript to show or hide fields. Use built-in browser features.
- Build your form with static pages.
- Use query string data for logic.
- Show specific fields based on previous answers.
Use this script to pass data across pages. It creates hidden fields from the 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); } };
Send final data to your server with a POST request at the end. Data stays in the browser.
Keep these points in mind:
- Data shows in the URL.
- Do not use this for passwords.
- Users might share URLs with their data.
Source: https://dev.to/ovidem/multi-step-form-without-the-overhead-5bjc