How do I create an image from a drop down menu and autofill a seperate text with said menu?

[jayjayb34438518]

I am >very< new to scripting, I want to have an an image pop up when we select something from one dropdown list and on another I'd like to have specific texts boxes other dropdown menus fill themselves when a specific item is picked, ex: selecting swordman class autoputs sword in equipment field.

[try67]

There's no such thing as an image pop-up in PDF files. You can create something like it, but it requires some advanced scripting know-how. However, it's certainly possible to make an image appear (or disappear) once a selection has been made in a normal (textual) drop-down field, as well as populating the value of another field with some text.

For the latter you can use something like this as the custom validation script of the drop-down field:

if (event.value=="sword") this.getField("equipment").value = "sword";

Note that JavaScript is case-sensitive, so this won't work if your value is actually "Sword" or the field name is actually "Equipment". You'll need to make sure they match perfectly for it to work.

[ls_rbls]

I need to ask if this is for D&D game?

Below is a very very simple script example to illustrate one of the many possible ways it could be implemented with Javascript&colon;

if (event.value =="sword") {this.getField("EQUIPMENT").value = "sword"; this.getField("IMAGE").display = display.visible}

else if ( event.value =="gauntlets of Ogre power") {this.getField("EQUIPMENT").value = "gauntlets of Ogre power"; this.getField("IMAGE").display = display.hidden }

else this.getField("EQUIPMENT").value = "";

And this is how the script above looks like when executed through the dropdown menu as a custom calculation script:

Image1:

Image 2:

As mentioned by Try67, the only problem is that in order to cycle through images in that same location in that page, AND,  as the user selects a different item from the dropdown menu, it definitely involves advanced javascripting which is totally different from my example above.

However, in my example below I set two image fields to the same size,  both fields are also set to read only ( and right on top of each in the same location on that page), and also set as hidden.

Below is a little more elaborated script that  I'm using just to illustrate an example of how you can still achieve a similar result without too much advanced scripting knowledge  nor PDF design knowledge:

if (!event.willCommit) {
{
this.getField("EQUIPMENT").value = event.target.value;
}

if (event.value =="sword") {this.getField("SWORD").display = display.visible} else { this.getField("SWORD").display = display.hidden;}

if ( event.value =="gauntlets of Ogre power") {this.getField("GAUNTLET").display = display.visible } else {this.getField("GAUNTLET").display = display.hidden;}

}

You can continue to do this for all the items you want (or have in that dropdown menu). 

And see slides below to appreciate how this non-elegant and  non-professionally made javascript behaves when executed  🙂 

[ls_rbls]

I forgot to add that, by using this line: 

this.getField("EQUIPMENT").value = event.target.value;

You don't have to worry about the case sensitive issue. It will just populate the text field with the same value as displayed by the event in the target dropdown field.

Also there's is no need to consider scripts that involve more complicated scripting, such as  grabbing an export value versus  the face value of the dropdown field.   

[Greg28740296rxp2]

This is the exact type of project I am working on. For the purpose of eliminating any possible problems I copied the code and names of fields but I’m not having an luck in it working.

I imported the script into Document Javascripts.

Suggestions?

[ls_rbls]

Hi @Greg28740296rxp2 ,

Happy to see an Acrobat user updating this thread.

Are both the field names in the script and the dropdown field object names spelled exactly the same?

Also, can you clarify in more detail what exactly is not working for you?

Are you getting any errors?

[Greg28740296rxp2]

I am working on a document that has a color code system status. I am trying make it so the assigned color dropdown will change picture color based on the drop-down list. The drop down is divided into four areas Green, Amber, Red, & Gray. Example: If green selected, a only green picture is displayed, or if red, only a red picture is displayed.

Similar to the example of equipment corresponding to the representative pictures

No message error is present when I enter the script. When I use the drop down (with the example script, drop down, and pictures). Nothing happens.

[Marcio31675062rdli]

Where do you put the image path? How exactly do you choose the image that will appear in each case?

[try67]

The images are the icons of button fields. Create a button field, then go to its Properties and under Options select the Layout to be Icon Only and click Choose Icon to select the image file:

[Patricia37591886p2ug]

Hello, 

I'm a baby beginner with Javascripting and tried using this reference, in Adobe Acorbat Pro with no luck, I'm not sure what I am missing. I want to be able to select from a drop-down list and when selecting 'Test1'  have 'Image1' appear, and when selecting 'Test2' have 'Image2' appear.

I have added the images as a button fields as mentioned above and set as read only + hidden. I used this Javacript in the dropdown menu as a custom calculation script field, but the images still don't appear when selecting from the drop-down list. I've attached the PDF I have been playing with, please help, I appreciate any guidance. Thank you.

if (event.value =="Test1") {this.getField("Dropdown").value = "Test1"; this.getField("Image1").display = display.visible}

else if ( event.value =="Test2") {this.getField("Dropdown").value = "Test2"; this.getField("Image2").display = display.hidden }

else this.getField("Dropdown").value = "";

[try67]

Use this code as the field's custom Validation script:

if (event.value == "Test1") {
    this.getField("Image1").display = display.visible;
    this.getField("Image2").display = display.hidden;
} else if (event.value == "Test2") {
    this.getField("Image1").display = display.hidden;
    this.getField("Image2").display = display.visible;
}

[Patricia37591886p2ug]

That worked perfectly, thank you so much!

[Patricia37591886p2ug]

Actually is there a way to also include in this javascript, to have the images re-hidden after unselected. I noticed that if image1 or image2 are not selected the images stay visible. 

Thank you.

[try67]

The code I provided already does that.

[try67]

Or do you mean if a third (default) option is selected? I didn't add that because there was no such option in the file you shared, but you can implement it by adding this to the end of the code above:

else {

this.getField("Image1").display = display.hidden;
this.getField("Image2").display = display.hidden;

}

[Patricia37591886p2ug]

Yes exactly my apologies, I should have included a third option (default) in my test file.  This did work perfectly, thank you so much for your expertise! I appreciate your help 🙂