Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Multiple Dependent Dropdown Menus in ES3

Avatar

Avatar
Level 1
Ggyy
Level 1

Likes

0 likes

Total Posts

19 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
Ggyy
Level 1

Likes

0 likes

Total Posts

19 posts

Correct Reply

0 solutions
View profile
Ggyy
Level 1

09-03-2021

Hello!

 

I know this question has been asked in the past before, but I cannot find a clear step-by-step solution for what I would like to accomplish.

 

I need to have three dropdown menus where two are dependent on the previous dropdown menu selections. For example, using vehicles: Year, Make, Model. The Year dropdown would have a list of the years, the Make dropdown would base the vehicle manufacturer shown on what was selected in the Year dropdown (some manufacturers did not exist in certainyears), and the Model dropdown would base the vehicle models shown on what was selected in the Make dropdown. A similar scenario would apply with Countries, State, Cities.

 

What would be the easiest way to accomplish this? I have tried switch statements on both exit and pre-open for the dropdowns, but always end up with a pop-up warning that the field "cannot be left blank" upon selecting the dropdown arrow for the second dropdown box.

 

Thank you!

Accepted Solutions (0)

Answers (4)

Answers (4)

Avatar

Avatar
Springboard
MVP
Magus069
MVP

Likes

143 likes

Total Posts

1,078 posts

Correct Reply

155 solutions
Top badges earned
Springboard
Validate 1
Ignite 3
Ignite 1
Establish
View profile

Avatar
Springboard
MVP
Magus069
MVP

Likes

143 likes

Total Posts

1,078 posts

Correct Reply

155 solutions
Top badges earned
Springboard
Validate 1
Ignite 3
Ignite 1
Establish
View profile
Magus069
MVP

09-03-2021

Hi there,

 

It is important to know how is your data stored? How do you request your data to populate your drop down lists?

 

If you populate based on embed form data, it is possible to populate a dropdown list on the exit event of the other, but in my experience I'd rather populate them within their own initialize event, and say as soon as I'd exit the previous drop down, I would execute the following drop down's initialize event like this:

Dropdown1.execInitialize();

 

When doing so it's important to take note that any selected value within the following drop down, may be altered if the previous selected value has been changed.

 

Let us know how you proceed gathering the lists items.

Avatar

Avatar
Level 1
Ggyy
Level 1

Likes

0 likes

Total Posts

19 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
Ggyy
Level 1

Likes

0 likes

Total Posts

19 posts

Correct Reply

0 solutions
View profile
Ggyy
Level 1

25-05-2021

Duplicate post.

Avatar

Avatar
Level 1
Mickeymouse1980
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile

Avatar
Level 1
Mickeymouse1980
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile
Mickeymouse1980
Level 1

10-03-2021

  • 1 dependant

Avatar

Avatar
Level 1
Ggyy
Level 1

Likes

0 likes

Total Posts

19 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
Ggyy
Level 1

Likes

0 likes

Total Posts

19 posts

Correct Reply

0 solutions
View profile
Ggyy
Level 1

09-03-2021

Hi Magus069!

 

Thank you for the response.

 

The data being used will reside in the form and it is really not that much. So you have an idea, the first dropdown will have five items from which users can choose. The second dropdown has a total of 15 items, but the most you will have available to choose from is about 4, depending on what users choose in the first dropdown. The third dropdown has a total of about 130 items, but should display a maximum of about 15, depending on what users choose in the second dropdown.

 

I hope this provides some clarity.

Magus069

Hi there,

 

so how are you storing that data in the form? Are you using arrays within arrays, or maybe JSON objects? How do you determine what item list to use when a value is selected?

Once you have selected a value within the first drop down, by extracting the correct items you will populate the next drop down, either by using setItems for the whole array object or addItem for each items from your collection.

When a value is changed from a "Previous drop down", you may want to reset the following drop down values in case the item value doesn't exist anymore.

 

Ggyy
The way the form is set up right now is for each dropdown to have its own list added under List Items in the Field tab. It is simple, but prone to errors once you get to the third dropdown. So unless ES3 is doing this in the background, I have not set up any arrays or JSON objects. I am new to ES3 and to programming in general (I have not done any serious programming in years), so any guidance or steps on how to accomplish this would be helpful. If I need to setup an array for this to work, how would I do that? I am open to any other ways.
Magus069
Hi, well at this point you have 2 different options. Either you create arrays objects with all your items either JavaScript or XML based and load them on the initialize event within the drop down lists. Or you simply create a drop down list field for each different possible lists. One will require you to work out with JavaScript and may requires you to understand a bit more how JavaScript Arrays or JSON/Hash table objects works, or you simply use different fields for each possible lists, and you show/hide the appropriate fields based on the selected value.
Ggyy
Hi Magus069. I think the latter of your suggestions appears to be easier to accomplish for me at this time, but I am willing to learn to do the arrays if it would be a better solution overall. I know I can do it with the proper guidance. Regarding the dropdown lists, how would you show/hide the entries you want displayed based on the previous dropdown selection?
Magus069

Well for the show/hide option, you simply would have to create a drop down field for each possible lists, and by changing their presence property with "visible" or "hidden" you can display the appropriate list based on the previous selected values.

For an example, after you have created each drop down lists and added each items to the appropriate lists, simply have a JavaScript into the exit event of the previous drop down fields that would verify the value selected and then show the right list and hide all the others.

//Exit event of first drop down (Year)? If I remember well
if (this.rawValue == "2005"){
    ddlDropDown2005.presence = "visible";
    ddlDropDown2006.presence = "hidden";
    ddlDropDown2007.presence = "hidden";
    ddlDropDown2008.presence = "hidden";
    ddlDropDown2009.presence = "hidden";
} else if(this.rawValue == "2006"){
    ddlDropDown2005.presence = "hidden";
    ddlDropDown2006.presence = "visible";
    ddlDropDown2007.presence = "hidden";
    ddlDropDown2008.presence = "hidden";
    ddlDropDown2009.presence = "hidden";
}

And so on... this is low maintenance, in case of javascript error you don't have much to verify/validate.

 

Ggyy

Thanks Magus069! I am a bit confused. Is the code for the exit event you posted hiding the years that are in that same dropdown? Shouldn't that be the code for the second dropdown? Also, is "ddlDropDown2006" referring to a dropdown or one specific item in that dropdown list?

Magus069
I was pretending that the year would be the first dropdown list, and it would make a appear or hide the appropriate drop downs to that year exactly... I should've made the example with make or model first sorry. So in that case, ddlDropDownYYYY is the name of the drop down field. that would contain all the model of a given car brand.
Ggyy

Hi Magus069.

 

I am sorry, but I am having trouble understanding. I tried the code in my form and it does not do anything. The general code that you posted, when corrected for the proper dropdown menus, basically should state that in the exit event of the first dropdown (Year), if the value of said dropdown is 2005, then the second dropdown (Make) should show only show specific car makes for that year and hide the others that were not available that year. What I do not get is how do I reference the dropdown text that is in the second dropdown from the first dropdown code?

 

What I see from your initial code is that you are hiding or displaying dropdowns instead of the actual text in the dropdown. This is not what I want to accomplish. Am I misunderstanding?

 

I still feel that this should be something pretty straightforward and easy to accomplish, but I am probably misunderstanding something. Maybe what I want to accomplish is better done in a different way (arrays, etc.).

Magus069
Maybe I'd be more of help if I can see what you are trying to accomplish, how and with what. Could you share your form so I can take a look?
Ggyy
Hi Magus. Sorry this has taken some time. I have a sample form ready. However, I do not see a way to attach the file to my post.
Magus069
You can use any tool that allows you to store files on a cloud, such as DropBox, OneDrive, Google Drive, etc. and leave the link in comment
Ggyy

Here is the link to the sample form: https://gofile.io/d/Ur5ehi

 

Thank you!

Magus069
Hi there, have a look at how I split the countries from a continent into multiple drop downs to be able to have mutiple lists. But it only displays the selected continent countries. https://gofile.io/d/8eMiUG
Ggyy

Hi Magus069,

 

Thanks for the file. I was able to get the first two dropdowns the way I want them. However, I have not been able to get the third one to work. In you sample form, I did not see any code in place to only display the cities associated with a specific country. I tried to copy the structure setup for the second dropdown to the third, but it is not working. I created 15 dropdowns within a subform, similar to what you did for the second dropdown, but it shows all dropdowns superimposed and it defaults to the last one on the list as the top one. It seems like it is not properly detecting the value of the second dropdown. Could you provide some insight or maybe an example of how program the third dropdown on your sample form to only display the cities for the country selected in the second dropdown. Thanks again for your help!

Magus069
Make sure your syntax is good, check the javascript console using adobe acrobat to see if any error pops up, and make sure that you change the name of the dropdown you are checking the value from
Ggyy
I have updated your sample form to reflect what I have. Can you please verify it to see where I am making a mistake? I did not include all countries in the Cities dropdowns for sake of time. The errors that are happening here are the one occuring on my actual form. The "visible" Cities dropdown does not show as it should and all are visible at the same time. The link is: https://gofile.io/d/VBxfnZ
Magus069
The reference syntax is not good. As you are trying to access each countries drop down fields they are included within a subform... to be able to access those fields you would have to write in front of each of them frmCountries and then access the drop down field. So the reference syntax to access the presence would look like this: frmCountries.ddCountryAfrica.presence
Ggyy

Hi Magus069,

 

Thank you for all your input. I am sorry I have not responded in some time, but I had been traveling for the past month. Your suggestions helped solved the issues I had, but there are still some minor ones that linger.

 

For example, there is a point where the drop-down menus stop working correctly. If open the form and select Africa, Ethiopia, and Addis Ababa, that works fine. I can switch cities in Ethiopia without issues.If I change the country to South Africa, it resets the city to blank and I can select the city and change them if necessary. I can go back to Ethiopia and its cities without issues. However, if I change the continent to Europe, it clears the country but not the cities. Those remain stuck in the Ethiopian cities. I can go back to Africa and is works fine.

 

You can find the most recent file here: https://gofile.io/d/GSTj4t

 

One more issue that I am having is that on the original form that I am working on, the drop-down fields are required. This ends up giving me an error every time I select a drop-down as the other ones have not been selected. This is not happening on the attached form but, for example, if I selected a continent, it would give me an error saying the country needs to be selected. If I then select the country, then an error pops up saying I need to select a city.

Magus069

Right, this is an issue where you'd have to add in the if statement that the right continent is also selected when showing the cities...

 

I can understand that all this may be time consuming, because you need to create a list of cities for each country. And then creating the righteous if statements along with show/hide the right fields.

And if you have to make them fields required with validation, it will be even harder to comply as you have hidden fields that are required. This solution is not quite the best option for you.

You will likely have to work with 1 drop down for each (Continent, countries, cities) and alter the list based on the option selected.

 

To do so, you will need to either work with Arrays or JSON object to create a hierarchical list that will gather the appropriate list automatically based on the selected item.

I can provide a sample on how to achieve this, you can start checking how to build a JSON Object or arrays if you wish.

 

You can also check on this object generator, check its demo to see how it works, it might help you achieve to build the object you want with all the continents, countries and cities.

http://www.objgen.com/json

 

 

Magus069
Go on and build your JSON object with this template, once you have a good template with some countries assigned to continents and cities assigned to countries, let me know. http://www.objgen.com/json/models/3b0uZ
Ggyy

Hi Magus069! Sorry this again took a long time, but work has been busy. I have completed the template you posted. It is at the same location: http://www.objgen.com/json/models/3b0uZ

 

I hope this is enough information for you to guide me with setting my form up. Thank you again for your assistance with this. Much appreciated!

Magus069

When creating the JSON object you have to make sure that each key does not contain a space, make sure to replace it with an underscore "_". Otherwise it will not work properly.

Exemple: North America > North_America

New Zealand > New_Zealand

United States > United_States

 

This is only for the KEYS of an JSON Object. The values that are within an Array displayed like (Cities [] = bla,bla,bla) does not need an underscore, because these are the values that will be displayed in the drop down lists.

Here is the link to the form I've been working on to make it work. https://gofile.io/d/aKWpEc

Simply make sure that the JSON object you are working on contains the right values at the right places and it will work like a charm.

 

If you have any question let me know.

 

Ggyy
I was responding as you were still typing. Thanks for the explanation regarding what keys are. I will fix them and look at the form you linked. I should be able to work on this steadily from now on, so no more long gaps in responding. Thanks again!
Ggyy

Hi Magus069!

 

I was looking at the form you posted and reviewing the code that was added to try and understand it. Just to confirm, did you add the three sub-forms at the bottom with the new code so that they can be compared with the previous ones above? I will continue to review and test it. This is all a learning experience for me.

 

Now, is there a way to reset the Cities drop-down to display blank or clear if the Countries drop-down is changed? Likewise, if I change the Continent drop-down to something else, can both the Country and Cities drop-downs be reset to display blank or clear? Maybe both things can be achieved by setting the default view to blank and resetting the drop-down to that every time something in a previous drop-down changes.

 

Thank you!

Magus069

I'm sorry I forgot to remove the old drop down lists.

 

Yes you can clear the drop down lists right before I call the execInitialize event from the exit event of the previous drop down lists.

You can clear the lists using the following method:

ddSelCity.clearItems();

You can remove the default value that is in cities drop down if you wish which will leave it blank.

You can also remove the selected values after clearing the list items from the drop down lists by doing the following:

ddSelCity.rawValue = null;

 I hope this will help.

Ggyy

I am trying the best I can to understand the code that you added to the form and the drop-downs. I feel that I will have a better grasp of this once I know what each part of the code does.

 

Initialize code for Country drop-down:

 form1.#subform[0].frmCountry.ddSelContinent::initialize - (JavaScript, client)

if (frmContinent.ddContinent.selectedIndex >= 0){
	var arrCountries = objData.getCountries(frmContinent.ddContinent.getDisplayItem(frmContinent.ddContinent.selectedIndex));
	this.setItems(arrCountries.join(","));
} else{
	this.clearItems();

 

Initialize code for Cities drop-down:

 form1.#subform[0].frmCity.ddSelCountry::initialize - (JavaScript, client)

if (frmContinent.ddContinent.selectedIndex >= 0 && frmCountry.ddSelContinent.selectedIndex >= 0){
	var arrCities = objData.getCities(frmContinent.ddContinent.getDisplayItem(frmContinent.ddContinent.selectedIndex), frmCountry.ddSelContinent.getDisplayItem(frmCountry.ddSelContinent.selectedIndex));
	this.setItems(arrCities.join(","));
} else{
	this.clearItems();

 

Functions in objData variable:

function getContinents(){
	var arrContinents = new Array();
	for (var continent in myData){
		arrContinents.push(myData[continent].name);
	}
	return arrContinents;
}

function getCountries(strContinent){
	var strContinentValue = strContinent.replace(/ /g, "_");
	return myData[strContinentValue].Countries;
}

function getCities(strContinent, strCountry){
	var strContinentValue = strContinent.replace(/ /g, "_"),
		strCountryValue = strCountry.replace(/ /g, "_");
	return myData[strContinentValue][strCountryValue].Cities;

 

I know that this is pretty much everything you added, but I am really trying to understand the code. I do not want to just copy/paste and be done with it, I want to know what these do so that I can learn to apply them properly. I do not expect you to explain these to me, you have already helped me so much. But if you want, then go ahead. That would be great! Otherwise, do you know where I could find more information about what these do? Thanks again!

Ggyy

Hi Magus069!

 

I managed to understand most of the code, with a few things that I am still working on, especially with the functions. My form is working great, as you expected. There are a few things that I wanted to ask before I complete it:.

 

I inserted the code in the exit event of the previous drop-down menu (before the initialize) using:

 

ddSelCity.clearItems();

 

However, this leaves the previously selected item visible and does not make the drop-down show its default value (e.g., "Select Country". Maybe it clears the drop-down items but not the visible ones? Is this how it should work?

 

I then added:

 

ddSelCity.rawValue = null;

 

This clears the visible value because it sets it to "null", which is good, but I would like to show the default value again, at least for the Cities drop-down. I managed to do it by using:

 

ddSelCity.rawValue = "Select Country";​

 

This works fine, since I am telling the drop-down object what to show textually. But I am sure there is a better way to call the default value set in the drop-down. Is there a way to actually tell the drop-down to show its default value set within the object vs. telling it what to show textually?

 

Once I sort the above, I would like to be able to have the drop-downs not reset the next one if you click on it but do not change the selection. For example, if I have Canada selected under Countries drop-down and Toronto under Cities, and I go and click the countries drop-down but change my mind and leave Canada on there, it resets the Cities because of the exit event (resets to either blank or my text above, pending updated code). Is there a way for code to evaluate if the selection has changed before triggering the reset of the next drop-down during the exit process?

 

Finally, all three drop-downs are required for this form. The form gives me an error every time I select something in a drop-down, telling me that the next drop-down cannot be left blank. Is there a way to do this check in some other way (e.g., using submit button on form) so that it does not interfere with the selection process of the drop-down menus?

 

Thanks again for your help!

Magus069

You made it through like a boss so far, good job.

I should've left comments for all the code that I wrote for you, I'm sorry for that I can still do it if you still wish me to explain some more.

 

If you wish to evaluate if the value has been changed, I suggest one of two different ways to do this and one of them is within the change event. This would require a bit more tweaking.

Another way would be this way: have a separate field that is hidden in background and have the value changed every time you exit the drop down field. When exiting the field simply verify, before executing anything code, if the value in the hidden field is the same as the selected value on the exit event. Hidden text field will do the job.

 

And for the validation message, I never really worked out that way I would need to dive in the software built-in validation to check how you can fix this; or have a look at what you already have implemented.

Ggyy

Hi there! Thanks for the encouragement. If you have time and wish to explain the code further, especially the functions, that would be great.

 

Your suggestion about using hidden fields to identify a change in the drop-down menu value worked perfectly! I was able to take care of that on my form without issues, though I am sure the other way (i.e., using the change event) would have been an interesting option. I tried to search for more information on that, but was unsuccessful.

 

The only thing that is left for me to do is to figure out the required fields issue. In summary, the 3 drop-down menus are required fields on this form and show up with a red outline when in Acrobat. The problem I am having is that, for example, when I select a Continent from the drop-down, it immediately warns me that the Country drop-down is required. I believe this is due to the initialize event for the Country drop-down occurring during the exit event for the Continent drop-down, but I could be wrong. The same thing happens for the City drop-down when selecting from the Country drop-down. Is there a way to prevent these pop-ups from happening but at the same time requiring these drop-down menus to be selected? Maybe something could be done right when one clicks on the Submit by Email button that I have on the form so that it verifies that those drop-down menus have values.

 

Thanks again for all your help!

Magus069

I don't know maybe you could try to remove the validation when filling those fields and on the mouseDown event of the submit you set them back to execute validation.

 

I believe the code you'd need would be:

//removing validation
ddCountry.validate.nullTest = "disabled";
//and adding validation
ddCountry.validate.nullTest = "error";
Magus069
Here is the document with the comments for the code I provided you with. Let me know if you have any questions. https://gofile.io/d/grIHCk
Ggyy

Hi Magus069!

I tried to check the file that you uploaded, but the folder seems empty. Maybe I took too long to access it. Would you mind reposting it?

 

I used your suggestions and managed to work around the pop up issue in the form. I am now able to validate the form fields properly, with a different approach depending on the field.

 

One last thing that I need help with is getting the signature box (which takes a digital signature from a certificate) to be required before the form is allowed to submit. I implemented the code at the end of this post https://experienceleaguecommunities.adobe.com/t5/adobe-livecycle-discussions/how-to-make-signature-f... and it works for requiring the signature before submitting. However, it still will not let me submit as the field still shows a validation failed error even though it has a digital signature in place.

 

Thanks again for all your help!

Magus069
Hi, sorry for the delay, you can try the gofile link once again, the file should be there. For the signature validation it is sketchy... I've already managed to get some work done with the fields but it is not that easy. A digital signature can't be verified in any given event. It's very specific to certain events. There's too many security restrictions related to the field that it is not very friendly to work around with its data.