Problem/Motivation

When using a multi step form with more than 2 steps, the form submission triggers twice on the 2nd step and empty the 1st step field value after reloading the page on the 3rd step.

Steps to reproduce

  1. Create a multi step form and add 3 pages on it.
  2. For each page, add a text field element and check the 2nd step text field as required.
  3. Create a custom module and add a webform_submission_form_alter hook on it
  4. Add a var_dump instruction with any text e.g var_dump('test'); into the hook
  5. Go to 'view' tab on the webform you just created.
  6. On the 1st step, the var_dump output should show only once, e.g. 'test'. Fulfill the field with any value on it and go to the 2nd step
  7. The var_dump output now shows twice. If you dump the $form_state object, you will notice different values on it: empty on the 1st dump, and on the 2nd dump, it shows all values
  8. On the 2nd step, fulfill the required field with any value and proceed to the next step
  9. The var_dump output is back to normal (showing only once) at the 3rd step
  10. Reload the page (send form data again)
  11. This will take the user back to the 2nd step, instead of the 1st one. The field value at this moment is correct
  12. Click on the previous button, and go back to the 1st step, and check the field value. It became empty

Issue fork webform-3366579

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

daniel_arend created an issue. See original summary.

cilefen’s picture

Version: 6.1.4 » 6.1.x-dev
Issue tags: -multi step, -form validation, -empty form state

Please provide the YAML of a minimal example form.

cilefen’s picture

Also, can you explain steps to reproduce that describe the bug behavior, without the value dumping?

daniel_arend’s picture

StatusFileSize
new5.38 KB

Yaml file is uploaded.

daniel_arend’s picture

daniel_arend’s picture

The value dump is part of the bug, because is the only way to detect that is running a double validation on the second step.

daniel_arend’s picture

StatusFileSize
new3.01 MB

Here follows the code I made. I also attached a video with the bug in action


 function mymodule_webform_submission_form_alter(&$form, $form_state, $form_id) {

    echo '<pre style="background:yellow;">';
    var_dump($form_state->getValues());
    echo '</pre>';
    
  }

daniel_arend’s picture

StatusFileSize
new5.12 KB
daniel_arend’s picture

henriquesf’s picture

Same issue!

daniel_arend’s picture

Here is some explanation about what I tried to fix the issue:

https://excalidraw.com/#json=R75jneYKHbK13FMsuLg7H,uxFDrzKLtZadt8ZxBFm6Cg

Somehow, the step #2 do additional things (rebuild maybe) that trigger the form_alter hook twice. At first trigger, the form_state variable is empty, the 2nd one the form_state values are set as should be.

It seems to be something on the way between stack 1 and stack 4 (link above).
I also tracked the overrideSettings method line by line, but could not find where/why is this hook triggering twice only in the 2nd step.
I hope this info helps to find the root cause.

jrockowitz’s picture

Status: Active » Postponed (maintainer needs more info)

I am confused because this does not seem to be a regression.

When multistep forms render the form is built (no values), processed (callback), and rebuilt (with values).

henriquesf’s picture

I am with the same issue.

daniel_arend’s picture

Thanks for the feedback. The workflow you described makes sense. But I'm still stucked into something I can only solve using form_alter hook.

The complete scenario is:

I have a multi-step form and need to do some extra validations after the user clicks on "prev/next" button. So I'm checking form state values inside this form_alter hook.
As it triggers twice (and it happens only on the 2nd step), the first time this info is empty (build), and only after rebuild, the values are set.
This will throw a false validation error (2nd step) on build, and then will pass on the second one, when values are set.

It gets more strange, because all other steps (1, 3, 4, etc) it runs only once and works exactly like it should.

As we need to check step by step, a custom handler would not solve the issue.

henriquesf’s picture

Up!

jrockowitz’s picture

Someone who is experiencing this issue is going to have to debug it.

gpapadas’s picture

I am experiencing an issue that is quite the same. In one particular webform, while I am on the 2nd step I click Next to go the 3rd, I am redirected to the 1st step, and I get an error saying that the required fields of the first step are empty. This happens randomly. The behavior is the same as I was on the 2nd step and clicked the refresh button from the browser and then Resend.

@daniel_arend did you manage to solve this?

dhanalakshmi1013’s picture

I'm having the same issue, but in a different way with Ajax enable in webform. I have a multistep webform with 9 steps and each step data sending to Datalayer GTM. Only 5,6,7 steps are submitting twice in GTM console rest all are sending the event once. While debugging this issue, I have observed that Alter_form where my datalayer JS is attached is calling twice on a single submit.

Also the same behaviour is not happening on Disabling Ajax in the form settings.

Can anyone share thoughts on this please!

jrockowitz’s picture

Version: 6.1.x-dev » 6.2.x-dev
jrockowitz’s picture

Title: Double form submission on step #2 of multi step webform » [Ajax] Double form submission on step #2 of multi step webform
Version: 6.2.x-dev » 6.3.x-dev
liam morland’s picture

Is anyone able to reproduce this on current versions of Webform and Drupal?

liam morland’s picture

Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.