How to Show/Hide Multistep Form Fields based on the Previous Step Selection?

(0) Share

Report

Posted on by Dhruvin Shah

I have Multi step Form consisting 4 Step:

In Step 1 I have Multi Select field name - "Care Type".

When Care type is Home or Office

then In Step 4 I want to show and hide some fields!

When I try to write JavaScript function, I didn't get DOM Element from Previous Step or Next Step. How to achieve this?

Categories:

General topics

I have the same question (0)

All responses (10)

Answers (0)

Lorne_PEI 39 on at

Like (0)

Report

I would try assigning the record to a variable using Liquid. Once in a variable it will expose all the fields and their values. Then you can use Liquid and Jquery to hide your fields.

{% assign id = request.params.id %}
{% assign project = entities.my_table[request.params.id] -%}
{% if project.my_field.value == 923190001 %}
$("some_field").hide();
{% endif %}

Was this reply helpful? Yes No
Dhruvin Shah 57 on at

Like (0)

Report

Hi!
Thanks for the quick response! I have New Form!
I have Multi Step Form

I'm loading the tab as a Step

Now, where can I write this Logic! My Record is not submitted yet!
In Step 3 I need Step 1 record value to show hide field!

Was this reply helpful? Yes No
Lorne_PEI 39 on at

Like (0)

Report

You need to place the code in Step 3 under Form Options there's a JavaScript box. Wrap it in a document.ready block.

Was this reply helpful? Yes No
Dhruvin Shah 57 on at

Like (0)

Report

Thanks a lot! Let me try!

Was this reply helpful? Yes No
Dhruvin Shah 57 on at

Like (0)

Report

@Lgallair - I have New form for every step !
How can I get {% assign id = request.params.id %} ??
because I've no parameter for the current record?

Was this reply helpful? Yes No
Lorne_PEI 39 on at

Like (0)

Report

On your first step, set your record source to Query String and your String Parameter Name to id. And then each subsequent step set it to Results from previous step.

Was this reply helpful? Yes No
Dhruvin Shah 57 on at

Like (0)

Report

@Lgallair - I tried this way by changing the settings!
Only thing is I'm not getting ID from previous step! because all my forms are Insert form from same table and loading tabs here as step!
Please see the setting changed!

When I try to add Liquid Code, it is returning me blank value for ID

Was this reply helpful? Yes No
Lorne_PEI 39 on at

Like (0)

Report

With the exception of Step 1; which should be Insert, change the mode to Edit on all other steps.

Was this reply helpful? Yes No
Fubar 8,344 Super User 2025 Season 2 on at

Like (0)

Report

If the Steps are for the same table, usually the first step would be Insert and subsequent ones Edit. On the scenario where it is the same record on different steps you can just add the field on your dataverse form for the subsequent steps (then create a step Metadata record and add a CSS class to hide it) and then use JQuery/JavaScript to Hide fields etc.

In the Scenario where you are creating multiple records, you may have to store the value(s) in local storage using JavaScript on the previous step and then retrieve them on the subsequent steps.

Was this reply helpful? Yes No
Shig 29 on at

Like (0)

Report
Hey Team,

I was also trying to hide some fields based on the user inputs from step one.
By using the below code, it was only hiding the field input box, and the label was visible.
$("#af_colk").hide();
So I used this code.
$("#af_colk").hide(); $("#af_colk_label").hide();
And it hides both label and the input box by leaving some blank spaces in the form.

I have a lot of cases to check and hide/show a lot of columns, so my code exceeds 15000 characters. And the custom JavaScript box only accepts till 10000 characters. To handle this situation, I am now trying to use CSS class.
So I created step Metadata record, and under control style -> CSS class, I added the class name.
JQuery I used:
$('#aircurtain').hide();
This code was not working for me.
Can you help me to figure out what I am doing wrong here?

@Fubar @Lgallair @Dhruvin

Was this reply helpful? Yes No