How can I make the "BACK" button save form data?

[lfjeff]

Is there a way to configure things to make the "BACK" button save the form data in a multi-step form?

I have users complaining that the form works fine when they click on "NEXT" but they lose their data when they hit the back button.

[craue]

You mean that clicking the back button saves the input for the form currently shown? This doesn't make sense to me.

[lfjeff]

What users want does not always make sense to programmers (something I've learned in 40 years of programming).

However, a data-persistent "BACK" button makes sense to them when you consider that many are used to using HTML tabbed forms. When they enter data in one tab, the data will persist if they click to another tab. It doesn't matter which tab they click, all the data they entered is still there until they click submit. I've seen tab-based forms configured as multi-step forms, so I don't think it's completely unreasonable.

In some cases, you may want the "BACK" button to discard any data that was entered. But in other cases, you may want it to save the data. In this case, users are entering data on the second step, then going back to the first step to correct something (don't ask me why, that's just what they are doing). Since the second step contains a full page of data, they are complaining that they have to re-enter everything and some are simply abandoning the form.

My personal feelings about whether it makes sense are mostly irrelevant. If user testing shows that sales are lost because users are confused or slowed down because of how a form works, then it's my job to improve it. If I were creating a form that would only be used by other programmers, I might do things differently. In fact, I am sometimes confused by forms that seem to be "too simple" because I expect things to be more complicated.

My job is to streamline the process and make everything work smoothly, not to educate users on how stupid they are (I stopped doing that about 30 years ago because it was almost always non-productive). Since this is a sales-related form, any streamlining of the process has a direct effect on the bottom line.

I could probably rework everything into a HTML tabbed form, but that would be much more complicated and involve a bunch of tricky Ajax. The simplest solution would be to simply make the "BACK" button save any data that was entered on the page.

I just want an option to make the "BACK" button work the same as the "NEXT" button with regards to saving the data. If it's not an easy fix, I'll have to figure out another way.

[craue]

It's indeed not easy to fix because it's rather a new feature than a fix, and it would influence the expected behavior for all existing flows if we just change the way the back button works. Although I don't agree with the idea that clicking a back button should save the input at all, it could be relevant for #67. But this won't be implemented soon I guess.

Unfortunately, I'd say that you have to override some methods of the flow to change how the "back" transition is handled. You may also customize the button template to enable client-side validation in this case.

[havvg]

I don't get the example use-case. If you are using tabs on your client side, this could mean you have one form, which is separated in the UI only. However in case you are really using a flow: the data provided in step X may alter any step X+Y (Y>0), remove one, add another, ..., there are issues when binding the previous data again, because it may be completely invalid. Especially because the user wants to alter the data provided before. That's why it makes sense to invalidate the data after step X.

Am I missing something here, or is this just not an actual form flow? I mean you are not really going back to a point to alter a decision, but you are just editing another subset of your data, which seems not to change. I doubt that a form flow is necessary in this case. A simple form would do the trick, wouldn't it?

[Adam314]

I know this is old question but maybe someone will look for answer here.

Clicking "back" resets the next step data. This is done by invalidateStepData() funcion in form flow.

Simple solution is to override this function. Here is my code:

namespace AppBundle\Form;

use Craue\FormFlowBundle\Form\FormFlow;

abstract class CustomFormFlow extends FormFlow
{
    public function invalidateStepData($fromStepNumber) {
        // do nothing, this prevents us from deleting step data when user hits "back" button
    }
}

Now create your form flow that extends CustomFormFlow instead of FormFlow.

[SiliconEngine]

Thank you Adam314 for that solution.

Note to Craue: It is very non-standard to delete the form data on the page when you do a back button. Honestly, I've never seen it anywhere else, what's the advantage of making the users retype the data? The whole point of the "back" button is to go back and make a correction, not destroy all the subsequent data. If you're filling out a paper form of multiple pages and go back to make a correction, do you throw out all the pages you've already done and re-do them?

I hope you consider fixing this.

[Filoz]

Hi,
I know it's an old question but I need the same behavior.
If I understand correctly the doc, what you (and I) need is to set $allowDynamicStepNavigation = true;
because invalidateStepData is called only if this variable is false (and action is go back):
https://github.com/craue/CraueFormFlowBundle/blob/master/Form/FormFlow.php#L670
is it correct?

[linxlad]

@Adam314 Not all heroes wear capes. Thanks for that simple solution 👍

[linxlad]

If anyone runs into this issue here is a possible solution:

namespace AppBundle\Form;

use Craue\FormFlowBundle\Form\FormFlow;

/**
 * Class BaseFormType
 * @package AppBundle\Form
 */
class BaseFlow extends FormFlow
{
    /**
     * If this is set to true then form data for the current
     * step will be saved when transitioning backwards.
     *
     * @var bool
     */
    protected $persistOnBackTransition = false;

    /**
     * @param int $fromStepNumber
     */
    public function invalidateStepData($fromStepNumber)
    {
        // Do nothing, this prevents us from deleting step data when user hits "back" button. See @Adam314 solution.
    }

    /**
     * {@inheritdoc}
     */
    protected function bindFlow() {
        parent::bindFlow();

        if ($this->persistOnBackTransition  && $this->getRequestedTransition() === self::TRANSITION_BACK) {
            $currentStepNumber = $this->getCurrentStepNumber() + 1;
            $form = $this->createFormForStep($currentStepNumber);
            $stepData = $this->retrieveStepData();
            $request = $this->getRequest();
            $formName = $form->getName();
            $currentStepData = $request->request->get($formName, []);

            $stepData[$currentStepNumber] = $currentStepData;
            $this->saveStepData($stepData);
        }
    }
}

[Filoz]

@linxlad , this can be a new feature to submit like a pull request...
I think it will be much appreciated

[linxlad]

@Filoz I agree, I am just not sure this is the best way to do. I had to do it this way as the class property $currentStepNumber is private. If it were protected creating a previous() method and then calling saveCurrentStepData() then finally calling the next() (maybe putting that logic in the bind method as show above) method after may have sufficed @craue?

[linxlad]

@craue Tested and PR created :)
#248

Example of it working:
http://cl.ly/gMHA

[Filoz]

I added a note in the pull request