बिना किसी अतिरिक्त बोझ के मल्टी-स्टेप फॉर्म्स
अधिकांश फॉर्म POST मेथड का उपयोग करते हैं। बहुत कम लोग GET मेथड का उपयोग करते हैं। GET आपके URL के अंत में डेटा जोड़ देता है।
पेजों के बीच डेटा पास करने के लिए GET का उपयोग करें। डेटा स्टोर करने के लिए आपको बैकएंड की आवश्यकता नहीं है। फ़ील्ड्स को दिखाने या छिपाने के लिए आपको Javascript की आवश्यकता नहीं है। ब्राउज़र के इन-बिल्ट फीचर्स का उपयोग करें।
- अपने फॉर्म को स्टैटिक पेजों के साथ बनाएं।
- लॉजिक के लिए क्वेरी स्ट्रिंग डेटा का उपयोग करें।
- पिछले उत्तरों के आधार पर विशिष्ट फ़ील्ड्स दिखाएं।
पेजों के बीच डेटा पास करने के लिए इस स्क्रिप्ट का उपयोग करें। यह URL से हिडन फ़ील्ड्स (hidden fields) बनाता है।
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