Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

EPiServer Forms - conditional form elements on other form element events

Vote:
 

Hi Guys,

I'm using Forms 4.2.1.0 and I'm trying to create a form where if a value is selected from a "selection" element another "text" elements are displayed.

Are any client side "element events" I can hook into similar to the "form events"?Are there any plans to introduce any "conditional elements"?

I am stuck with this requirement so please if anyone can help me on this.

Looking forward for positive response.

#174750
Feb 03, 2017 8:26
Vote:
 

I have done this with custom form elements and JavaScript.

In your case, I think you can create a custom selection element with properties where you define which fields should be displayed after selection. Then on the client side in the JavaScript on selection change, display those fields.

As <select> is an ordinary HTML element, you do not need special "forms events", just use ordinary "change" event on that element.

#174752
Edited, Feb 03, 2017 9:17
Vote:
 

Hi Sushant,

Are any client side "element events"

Forms only publishs a few more events at the moment, see here.
You can hook to the client side event like normal jQuery code, we don't introduce anything special here. You can hook into blur or keyPress of $(".Form__Element input") using jQuery.

if a value is selected from a "selection" element another "text" elements are displayed.

We don't support update elementB base on elementA value (though we thought of it from the begining). At the very first time of developing Forms, we have constraint that with or without JS, Forms should behave the same. This might change from now on.

Are there any plans to introduce any "conditional elements"? 

There is a lot of issues follow a element value change (validation, save/load to localStorage, how to specify element reaction base on other element in EditView, cannot mimic same behaviour without JS, ...). I think yes, but not in near future, because of the complexity and it is not highest priority anyway.

Currently only STEP can be show/hide base on other ELEMENT value. I suggest you to use it.

#174829
Feb 06, 2017 12:11
Vote:
 

I've been looking at a similar requirement. I think I have a nice way of defining conditional elements. Works well for simple show and hide type scenarios.

I'm struggling at working out validation and how I can disable it for a hidden field. Is there anyway I can hook into the Episerver client side events and disable validation (or force it true) for a particular element. I can't see any nice way of doing this? Any ideas, otherwise I might have to 'false' populate fields with some whitespace..... I feel dirty for even saying that.

#176017
Mar 07, 2017 18:15
Vote:
 

Hi @Mark:

Please give us your idea about "a nice way of defining conditional elements".

I only think of the same with Step condition (currently in Forms).

You should be more clear with hook into Episerver client side events. Do you see built-in event in Forms only publishs a few more events at the moment, see here?

If it's not enough, please tell us what you need.

#176031
Mar 08, 2017 5:14
Vote:
 

Hi Mark,

I also have implemented custom element allowing to configure master element and based on that's element value conditionally show/hide other elements.
Now I think have same issue as you, meaning that hiding the form element will of course not disable validation, did you find some elegant way of doing that?
Latest idea is to create own custom validator, but not sure yet if I will be able to fullfill all needs, since in that will have to check values from other elements and actually important also to know the type of the element.

Br, Greg

#195557
Jul 30, 2018 14:47
Vote:
 

You can try Forms v4.15. The FormFieldDedendency is built-in.

  • User (editor, visitor) features are ready.
  • programmatic API (developer) are at beta.
#195572
Jul 31, 2018 4:11
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.