Validation on dropdown based on the other dropdown in the form

[sonalik83665772]

Hello,

I am currently working on a form which has multiple form components.I am looking to autopopulate fields in one dropdown based on something selected in the first one.All these dropdowns are separate components in one form.

Is there any good documentation for such controls.

Thanks,

Sonali.

[smacdonald2008]

(" form which has multiple form components." -- I assume you mean a component dialog that an author enters data into. Rest of this is based on this assumption. )

We have a community article that talks about how to dynamically update one dialog field based upon another selected value. See:

Dynamically updating AEM custom xtype fields

In this example - a text field is updated with the value of a drop-down. This will show you how this use case is achieved. 

On a related note - we have a brand new article that shows how to dynamically  populate a drop-down in a dialog with JSON returned by a sling servlet: 

https://helpx.adobe.com/experience-manager/using/dialog_fields_servlets.html (As of today - this is brand new and still being updated) 

[Sham_HC]

If you are talking about aem standard then follow scott recommendation. If you are looking for  aem forms addons then follow  https://helpx.adobe.com/aem-forms/6/dynamically-populate-dropdowns.html

[sonalik83665772]

Thanks for the replies! The articles were really good :)

However,I would need some more inputs/blogs on this.To explain some more details,

I am using form components(OOTB components provided by AEM,simple form components not the Adaptive forms) and dragging and dropping them one after the other onto the main content area of my page.I want to establish some kind of a relationship between these dropped components so that once I change something in the dropdown in the form,the textfield dropped below the dropdown should auto-populate with some values.This textfield won't be editable by end-users.We have such multiple validations,so I was hoping to get some place where these dropped components can communicate with each other.

[smacdonald2008 · Accepted solution]

I see - you want the form and drop-down to be displayed in the web page -- as opposed to a component's dialog. 

This use case would require a custom AEM component -. You would need to include two widgets in the custom component- a form and then the drop-down that you want to auto-populate. You can use JQuery and its selectors to achieve this. 

You need to program the event handler in the form to capture the values entered into the form. Then once you capture the value - you write the value to the drop-down. Without creating a custom component - you cannot wire the relationship between the form and the drop-down. 

[sonalik83665772]

Thanks for the info!

I was going through some of your posts on event handlers.

I have already created all these dropdowns,textfields and form fields as custom components since I wanted to customize them as per the requirements.So the ones I have dragged and dropped are custom components that I recreated in /apps.Is there any elaborate document for having this usecase implemented.I am looking for a simple solution like we have in javascripts at clientside or similar?

[smacdonald2008]

The event handlers in this case would be the component JSP via JS - not an OSGi and Java that handles JCR events.

I will look into this today. 

[smacdonald2008]

Here is one way to address this requirement. Build a new form component. There are so many great Form APIS avaivable. In this example - i used JQuery Mobile API. 

See:

[img]AFormExample.png[/img]

IN the /apps/form_app/components/myForm/myForm.jsp - you can define a form and other controls using JQuery. THen when a field on the form is changed - create an Event Handler script in the myForm.JPS and update the other field using JQuery Selector logic. 

[sonalik83665772]

Which means that it would be one form component with the dialogs and not separate components broken down on a form.

I was having separate fieldlevel components so has to have multiple forms created using them since we have many forms.

If there are such options present at fieldlevel that would definitely help.

Is there someway to wire the communication between the fieldlevel components using the properties?Any inputs for that?

This discussion is great and helping me understand my options :)

[smacdonald2008]

Here is a great demo of what i am thinking you can do:

http://jsfiddle.net/DigitalBiscuits/QWSQp/71/

Of course - build the UI better, etc - but this gives you a visual of what i am thinking.