Show/Hide field based on Condition

Feb 14, 2013 at 10:41 AM
Hello,
I am using your solution in few projects and it is rocking. Good Work.
I have administrator section, where user create/add fields in form and then I save it to Database. On Preview, I read from database and and display it to user.
Currently I have a requirements that one field can be dependent on other field and display dependent field on form if it meet the define dependency rule. For example:
I have my radio button for "do you want to be contacted with special offers?" On yes, it displays the fields for the user's email, phone number, etc.
How can I achieve this behavior using DynamicFields? Thank you.
Coordinator
Feb 14, 2013 at 11:03 AM
First hide the field that is dependent on the radio button field. With javascript, setup an event handler to watch for radio button state change. When change happens show the other field.

All of this can be accomplished using css selectors and javascript. You can change the markup surrounding your fields using the templating feature. That should give you all the control you need to do client side stuff.
Feb 14, 2013 at 12:07 PM
Thank you for your response. Yes, I could achieve this using css selectors and javascript. But have few doubts, for example if my two or three fields like (email, phone number, fax etc) are dependant then how can I mark them hidden by default using DynamicFields?
Secondly as my solution will be complete dynamic in a way that I may have two radio buttons and one dropdown field. And there are few textboxes/checkbox/dropdown which are dependant on these radio button & dropdown fields (and it is also possible, no field is dependant) so how can I find that which fields are dependant on this radio/dropdown?
Moreover if these fields are hidden then there should not be any validation (ModelState should be valid) but if these are visible (radio button value is YES) then validation must perform (like RequiredIf attribute). How can I achieve this behaviour with your dynamic fields?
Thank you once again.
Coordinator
Feb 14, 2013 at 12:23 PM
I don't have an answer other than download the source and make dynamic forms do what you need it to.
Feb 21, 2013 at 3:35 PM
This Web/CSS/JavaScript stuff is all new to me. If anyone has a simple code example of Ronnie's suggestion to "With javascript, setup an event handler to watch for radio button state change. When change happens show the other field." it would be really helpful...

Aside, big thx for all you've achieved ronnieoverby. This has already taken me a huge way down the road to where I've been asked to take this project, all I need is a Select Title: Mr/Mrs/Ms/Dr/Other (please specify) - where the other box appears when Other's been selected and I'm largely there, besides styling and integrating into our infrastructure. This type of Choice-Or-Other input is going to be so common I'm considering trying to derive from RadioList, overriding Validate to allow any value and when not on list select the other radio button - but in my ignorance I'm still trying to work out if it'll even be possible to inject the javascript bit to show/hide the textbox on state change...
Coordinator
Feb 21, 2013 at 4:02 PM
I'll try to post an example of what I'm talking about this evening.
Feb 22, 2013 at 12:54 PM
Yes, please share some example on this idea. We are waiting. Thank you
Coordinator
Feb 23, 2013 at 12:34 AM
Don't hold your breath. I'll get an example together, but not sure when.

On Fri, Feb 22, 2013 at 8:54 AM, malikirfan <notifications@codeplex.com> wrote:

From: malikirfan

Yes, please share some example on this idea. We are waiting. Thank you

Read the full discussion online.

To add a post to this discussion, reply to this email (mvcdynamicforms@discussions.codeplex.com)

To start a new discussion for this project, email mvcdynamicforms@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe or change your settings on codePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at codeplex.com


Feb 26, 2013 at 7:17 AM
Edited Feb 26, 2013 at 7:22 AM
Dear, I have achieve my required behaviour using Template property and JQuery Selector. Basically I wrap my fields with DIV and set this DIV hidden/visible. Now in Javascript, based on Radio button change, I change this DIV state accordingly.
Now I am wondering if any field is HIDDEN inside DIV then how can I remove its Validation? I noticed in your source code that you have "public bool Validate(bool onlyDisplayed)" function but this function work only if Field is not display (Render inside Form). In my case, my field is rendering into the form and I am just changing DIV visibility.
Any idea to achieve it please?
Apr 10, 2013 at 10:41 AM
Hi,

Have you solved it?


yasir
Apr 10, 2013 at 11:14 AM
Yes, I have solved this validation problem too. Basically you will need to add a Property in "Field.cs" that it is hidden or not. Using this property you can simply ignore the validation if it is. For your reference, here is the FORM.Validate function.
public bool Validate(bool onlyDisplayed)
        {
            bool isValid = true;

            foreach (var field in InputFields.Where(x => (!onlyDisplayed || x.Display) && !x.IsHidden))
                isValid = isValid & field.Validate();

            return isValid;
        }
If you see FOREACH loop, I have this condition "!x.IsHidden".

Cheers.
Apr 10, 2013 at 11:43 AM
thanks for reply!

but question is this as in your situation you were hiding the fields with jquery/js same as me so how can i set this value in jquery? because this property is server side