ਬਿਨਾਂ ਕਿਸੇ ਵਾਧੂ ਬੋਝ ਦੇ ਮਲਟੀ-ਸਟੈਪ ਫਾਰਮ

ਬਿਨਾਂ ਕਿਸੇ ਵਾਧੂ ਬੋਝ ਦੇ ਮਲਟੀ-ਸਟੈਪ ਫਾਰਮ

ਜ਼ਿਆਦਾਤਰ ਫਾਰਮ POST ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਬਹੁਤ ਘੱਟ ਲੋਕ GET ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। GET ਤੁਹਾਡੇ URL ਦੇ ਅੰਤ ਵਿੱਚ ਡਾਟਾ ਜੋੜਦਾ ਹੈ।

ਪੇਜਾਂ ਵਿਚਕਾਰ ਡਾਟਾ ਪਾਸ ਕਰਨ ਲਈ GET ਦੀ ਵਰਤੋਂ ਕਰੋ। ਡਾਟਾ ਸਟੋਰ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ backend ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਫੀਲਡਾਂ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਉਣ ਲਈ ਤੁਹਾਨੂੰ Javascript ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਦੀਆਂ built-in ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

• ਸਟੈਟਿਕ ਪੇਜਾਂ ਨਾਲ ਆਪਣਾ ਫਾਰਮ ਬਣਾਓ।
• ਲੌਜਿਕ ਲਈ query string ਡਾਟਾ ਦੀ ਵਰਤੋਂ ਕਰੋ।
• ਪਿਛਲੇ ਜਵਾਬਾਂ ਦੇ ਅਧਾਰ 'ਤੇ ਖਾਸ ਫੀਲਡਾਂ ਨੂੰ ਦਿਖਾਓ।

ਪੇਜਾਂ ਵਿੱਚ ਡਾਟਾ ਪਾਸ ਕਰਨ ਲਈ ਇਸ script ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ URL ਤੋਂ hidden ਫੀਲਡਾਂ ਬਣਾਉਂਦੀ ਹੈ।

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 ਨਾਲ ਆਪਣਾ ਫਾਈਨਲ ਡਾਟਾ ਆਪਣੇ server 'ਤੇ ਭੇਜੋ। ਡਾਟਾ browser ਵਿੱਚ ਹੀ ਰਹਿੰਦਾ ਹੈ।

ਇਨ੍ਹਾਂ ਗੱਲਾਂ ਦਾ ਧਿਆਨ ਰੱਖੋ:

• ਡਾਟਾ URL ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।
• ਇਸ ਦੀ ਵਰਤੋਂ passwords ਲਈ ਨਾ ਕਰੋ।
• ਯੂਜ਼ਰ ਆਪਣੇ ਡਾਟਾ ਵਾਲੇ URLs ਸਾਂਝੇ ਕਰ ਸਕਦੇ ਹਨ।

ਸਰੋਤ: https://dev.to/ovidem/multi-step-form-without-the-overhead-5bjc