Skip to main content
Participant
June 30, 2020
Question

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

  • June 30, 2020
  • 2 replies
  • 5848 views

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.

2 replies

ls_rbls
Community Expert
Community Expert
July 4, 2020

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  🙂 

 

 

 

 

 

 

 

 

 

 

 

 

Participant
August 15, 2023

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

try67
Community Expert
Community Expert
August 6, 2024

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 = "";

 


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;
}
try67
Community Expert
Community Expert
June 30, 2020

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.