વધારાના બોજ વગરના મલ્ટી-સ્ટેપ ફોર્મ્સ
મોટાભાગના ફોર્મ્સ 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