Customized dropdown in multi-step form is valid until submission [RESOLVED]

[corey (Corey Lightburn)]

Hello,

This is a follow-up entry to one that I added a few weeks ago regarding dynamic dropdowns and customizing the HTML output for it: Append data-attributes to dropdown options

I am successfully populating the dropdown with data from a custom post type, as well as modifying the output HTML to include the necessary data attributes for use in a REST API call. The functionality requirements I was looking for in the previous entry have been met. This entry is centered around form validation and what I think may be a bug?

This required dropdown lives in the 4th step of a 5-step form, and after a selection has been made I am able to successfully navigate to the 5th step. This 5th step is a “review and submit” step that displays all of the fields the user filled out, which does include the custom dropdown selection that was made. However, when I submit the form from this step it actually sends me back to the 4th step while clearing out the selection that was made and then marking it as invalid.

Here’s a step-by-step breakdown and a screenshot to help illustrate the issue.

Phase 1 - You’re getting to this step for the first time and all fields are blank.
Phase 2 - You’ve selected a dealer and other required fields have been filled out.
Phase 3 - You’ve clicked “Next” and moved on to the 5th step to review the data prior to form submission. Note that the selection from the “Dealer Name” dropdown has been passed through at this point.
Phase 4 - You’ve clicked the “Submit” button but you’ve been sent back to the 4th step of the form, while being told that you never chose an option from the “Dealer Name” dropdown.

I’m apparently only allowed to add one image so here are all 4 phases in one image:

It doesn’t matter if you then make the selection again and re-submit the form, you’ll just be sent back to the same place. So the user would be stuck in a loop, never able to submit the form.

Any help would be greatly appreciated!

[corey (Corey Lightburn)]

Update: we had to make this Dealer Name dropdown not required so we could continue testing other things but the problem actually still persists. If the user makes a selection in this dropdown, moves on to the next step, and then moves back to the step with this dropdown the selection they made is no longer present.

So something somewhere is preventing the value from being saved altogether.

[corey (Corey Lightburn)]

So it turns out that they way I had utilized the gform_field_choice_markup_pre_render filter to modify the HTML output of the dropdown field was working…but not validating. I wrote into Gravity Forms support and they suggested that instead of doing this:

add_filter( 'gform_field_choice_markup_pre_render_21_156', function ( $choice_markup, $choice, $field, $value ) {
    if ( $field->get_input_type() == 'select' ) {
        $choice_markup = '<option value="' . rgar( $choice, 'value' ) . '" data-id="' . rgar( $choice, 'id' ) . '">' . rgar( $choice, 'text' ) . '</option>';
    }
  
    return $choice_markup;
}, 10, 4 );

I do this:

add_filter( 'gform_field_choice_markup_pre_render_21_155', function ( $choice_markup, $choice, $field, $value ) {
    if ( $field->get_input_type() == 'select' ) {
        return str_replace( 'value=', 'data-id="' . rgar( $choice, 'id' ) . '" value=', $choice_markup );
    }
  
    return $choice_markup;
}, 10, 4 );

In essence, I should have stuck closer to the example from the documentation. Even though the generated HTML was identical, making the modifications via str_replace resolved the strange validation errors. In case anyone else stumbles across this same issue hopefully this explanation will help.