Question 278444 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Preserve the form data when I go back to a previous page

I have a multi step form. When I move to the next page and decide to go back to the previous page to make changes, inputs are cleared. How can I manage this please?

Here’s a recreation of the multi step form: https://codesandbox.io/s/agitated-spence-q3vtqw

Tags:

2

Answers


  1. 0

    You can solve this in 3 ways.

    1. Maybe you can save all steps data in formData state. So,
    const [formData, setFormData] = useState({});
/* 
formData = {
    step_1: {
    name: 'A'
    email: 'A.com'
    country: 'us'
    },
    step_2: {
    name: 'B',
    email: 'B.com',
    country: 'ru'
    }
}
*/

const [step, setStep] = useState(1);

const handleNext = (data) => {
    setFormData({...formData, step: data});
    setStep(step + 1);
};
    1. You can use redux. when you input formData, please save data in reducer.
      Then you can save formData.
    2. You can save formData in localStorage.

    If you want detailed solution, I can help.
    Good luck.

    Login or Signup to reply.
  2. 0

    I’ll recommend you to use localstorage.

    so,

    localstorage.setitem(inputInfo, dataValues);

/* group all input values as a object named datavalues, and stored it on inputInfo of localstorage variable */

...

const memorizedData = localstorage.getItem(inputInfo);
if (memorizedData) dataValues = memorizedData

...

if (saveButtonClicked) localstorage.clear();

    Good luck.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search