ฟอร์มแบบหลายขั้นตอนโดยไม่ต้องมี overhead
ฟอร์มส่วนใหญ่ใช้เมธอด POST แต่มีคนไม่กี่คนที่ใช้เมธอด GET โดย GET จะเพิ่มข้อมูลต่อท้าย URL ของคุณ
ใช้ GET เพื่อส่งผ่านข้อมูลระหว่างหน้า คุณไม่จำเป็นต้องมี backend เพื่อจัดเก็บข้อมูล และไม่จำเป็นต้องใช้ Javascript เพื่อแสดงหรือซ่อนฟิลด์ เพียงแค่ใช้ฟีเจอร์ที่มีมาให้ในเบราว์เซอร์
- สร้างฟอร์มของคุณด้วยหน้าเว็บแบบ static
- ใช้ข้อมูล query string สำหรับตรรกะ
- แสดงฟิลด์เฉพาะเจาะจงตามคำตอบก่อนหน้า
ใช้สคริปต์นี้เพื่อส่งผ่านข้อมูลข้ามหน้า โดยมันจะสร้าง hidden fields จาก 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 request ในตอนท้าย ข้อมูลจะถูกเก็บไว้ในเบราว์เซอร์
สิ่งที่ควรคำนึงถึงมีดังนี้:
- ข้อมูลจะปรากฏใน URL
- ห้ามใช้สิ่งนี้กับรหัสผ่าน
- ผู้ใช้อาจแชร์ URL ที่มีข้อมูลของพวกเขาติดไปด้วย
ที่มา: https://dev.to/ovidem/multi-step-form-without-the-overhead-5bjc