I'm using multi step form its working fine but the problem is when I have filled first step and going to next step then for some reason I come back to previous step the data which I filled has been cleared how can I manage this problem

I’m using multi step form its working fine but the problem is when I have filled first step and going to next step then for some reason I come back to previous step the data which I filled has been cleared how can I manage this problem

You need to save the data in a variable and set the variable as init value. Otherwise, do not use conditional display, but only display none.

The issue is, that when the step is hidden, it also gets destroyed, and then when you go back, it gets “rebuilt”, but at that time, it has no context or clue about what was stored in the previous element.

2 Likes

@Broberto At first I also got the same idea of ​​storing it in a variable, but I thought there might be an easier way, Thanks anyway.

If you have the control over the how the each step is displayed/hidden, you can use display style property instead of conditional render and that might retain the data, as it would not destroy the fields, just hide them.

1 Like

Great @Broberto ,this is best solution ,thanks again

1 Like

Hi @vikas :wave:

+1 on @Broberto’s suggestions!

Just keep in mind that, when you use the CSS display property, the browser still renders the elements that are hidden.

That’s fine if your multi-step forms don’t contain too many elements.

If you add more and more elements on the page and you notice the browser starts lagging, conditional rendering will be your friend :slight_smile:

1 Like

Hi @Joyce
Yes it contains the many elements. So the solution is to make variable for each and perform conditional rendering ?

Hi @vikas :wave:

If you have many elements, yes, I think it can be a good option to save the answers of the users in a variable.

That said, instead of having one variable per input (which can add up to a lot!), you could have an object variable that you update with new inputs each step of the way.

For example, here we have userAnswers variable with empty default values except for the form step the user should start on:

Then when the user clicks on the button to navigate to the next step, we add 1 to the step they were on and update the object with the input values from that step:

Does that make sense?

1 Like

@Joyce ,yes that’s what I did.
But Upload file Inputs are still clearing I’m unable to set the Init value for the same could you please guide me on this @Joyce

Thankyou…

1 Like

Hi @Joyce
Upload file Inputs are still clearing I’m unable to set the Init value for the same could you please guide me on this.

Hi @vikas :wave:

Can you share a screen recording of how you set things up on your side and where you’re stuck?

Hi @joyce I think I see what they’re referring to, when using a file upload input there is not an init or initial value to set. Is there any workaround for this?