טפסים רב-שלביים ללא סיבוכיות מיותרת
רוב הטפסים משתמשים בשיטת POST. מעטים משתמשים בשיטת GET. GET מוסיפה נתונים לסוף ה-URL שלך.
השתמשו ב-GET כדי להעביר נתונים בין דפים. אין צורך ב-backend כדי לאחסן נתונים. אין צורך ב-Javascript כדי להציג או להסתיר שדות. השתמשו בתכונות המובנות של הדפדפן.
- בנו את הטופס שלכם באמצעות דפים סטטיים.
- השתמשו בנתוני query string עבור לוגיקה.
- הציגו שדות ספציפיים בהתבסס על תשובות קודמות.
השתמשו בסקריפט זה כדי להעביר נתונים בין דפים. הוא יוצר שדות נסתרים מתוך ה-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