Participating Frequently

Answered

show/hide fields based on drop down choices

54 replies
50519 views
Translate

I have a dropdown field with three choices. Based on the selection, I need a specific text form field to appear, and the others to remain hidden. (Or if it makes the code more clean, the resulting field could be a dropdown, too, with the appropriate choice selected.) I don't know Java well enough to extrapolate code from online examples and repurpose it for my forms. I can provide a sample form. Thanks in advance for your help.

M

MatLac10492407Correct answer

Inspiring

There are some ways to execute this. the easiest for you would be to add this script to the calculate (calculate tab in properties) event of the field that needs to be hidden. Take notes that everything after "//" is just hints for you to understand the code. You will need to put this script in every field that you want to replicate the behavior, changing the value according to what you want to accomplish. the word "event" means myself for you to understand.

if (this.getField("dropdown").value == "put value here"){ //replace "dropdown" with the name of the dropfield

event.target.display = display.visible;

}

else{

event.target.display = display.hidden;

}

This solution works if you have a small amount of fields. If you manage to have a large number of similar fields, let me know because there are other and faster ways.

A

Andrey0101

Participant

Hi, Could you please show how to set filed (more than 6) set mandatory/readonly? thank you in advance, Andrey

Translate

try67

Community Expert

this.getField("Text1").required = true;

this.getField("Text2").readonly = true;

Duplicate and repeat as much as necessary.

Translate

A

Andrey0101

Participant

thank you so much, ufortunatelly first 2 feild cnanged status, other not.

code: custom verification/dropbox

var f1 = this.getField("phone");
var f11 = this.getField("phone_other");
var f2 = this.getField("date_order");
var f21 = this.getField("reason");
var f3 = this.getField("phone_number_other");
var f4 = this.getField("limit");
var f41 = this.getField("limit_other");
var f5 = this.getField("internet");
var f51 = this.getField("internet_other");
var f6 = this.getField("WBS");

if (event.value=="-Select action-") {

f1.readonly = true; f11.readonly = true;
f2.readonly = true; f21.readonly = true;
f3.readonly = true;
f4.readonly = true; f41.readonly = true;
f5.readonly = true; f51.readonly = true;
f6.readonly = true;

f1.required = false; f11.required = false;
f2.required = false; f21.required = false;
f3.required = false;
f4.required = false; f41.required = false;
f5.required = false; f51.required = false;
f6.required = false;

} else if (event.value=="Mobile phone request") {

...

}

could you please help?

BR

Andrey

Translate

D

Dakwapii

Participant

@try67 This helped me as well! Thank you so much! Are you familiar how this can be adapted to accomodate multiple values from one dropdown to trigger one form field to hidden. I tried to repeat the code for other values and does not function. I am a complete novice so the fix can be easy, but I am not knowledgeble enough. Thank you in advance.

Translate

Thom Parker

Community Expert

First, Read this article:

https://www.pdfscripting.com/public/Hiding-and-Showing-Form-Fields.cfm

You might also find it helpful to look through the material here:

https://www.pdfscripting.com/public/PDF-Form-Scripting.cfm

Now, testing for a set of selections is just a matter of adjusting how the condition is written for the "if" or other type of conditional.

for example:

if((event.value == "a") || (event.value == "b") || (event.value == "c"))

this.getField("OtherField").display = display.hidden;

else

this.getField("OtherField").display = display.visible;

This code hides the "OtherField" on a selection of "a", "b", or "c".

This could also have been done using a switch statement

switch(event.value)

{

case "a":

case "b":

case "c":

this.getField("OtherField").display = display.hidden;

break;

default:

this.getField("OtherField").display = display.visible;

break;

}

Translate

Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often

failing_autodidact

Participating Frequently

I'm still struggling with this - I'm desperate. Everything is working EXCEPT for the red. I just cannot figure out why and I'm going crosseyed. That same exact action works in all other instances.

if (event.target.value == "AWARDS/PRIZES in accordance with Hospitality Policy") {

this.getField("REQUIRED Briefly describe the expense and its business purpose").display = display.hidden;

this.getField("Check Box7").display = display.visible;

this.getField("Check Box8").display = display.visible;

this.getField("awards prizes").display = display.visible;

} else {

this.getField("REQUIRED Briefly describe the expense and its business purpose").display = display.visible;

this.getField("Check Box7").display = display.hidden;

this.getField("Check Box8").display = display.hidden;

this.getField("awards prizes").display = display.hidden;

}

if (event.target.value == "ENTERTAINMENT EVENT (tickets, recreational, sporting) in accordance with Hospitality Policy") {

this.getField("Check Box1").display = display.visible;

} else {

this.getField("Check Box1").display = display.hidden;

}

if (event.target.value == "ENTERTAINMENT SVCS for campus event (decor, equipment or venue rental, music) in accordance with Hospitality Policy") {

this.getField("ent svcs").display = display.visible;

} else {

this.getField("ent svcs").display = display.hidden;

}

if (event.target.value == "FOOD/BEVERAGE/TABLEWARE in accordance with Hospitality Policy") {

this.getField("REQUIRED Briefly describe the expense and its business purpose").display = display.hidden;

this.getField("food").display = display.visible;

this.getField("students").display = display.visible;

this.getField("off campus guests").display = display.visible;

this.getField("employees").display = display.visible;

this.getField("spouse partner of employee").display = display.visible;

this.getField("breakfast").display = display.visible;

this.getField("lunch").display = display.visible;

this.getField("dinner").display = display.visible;

this.getField("light refreshments").display = display.visible;

this.getField("campus wide").display = display.visible;

this.getField("attendee list required").display = display.visible;

this.getField("attach agenda").display = display.visible;

this.getField("event name").display = display.visible;

this.getField("benefit to the csu").display = display.visible;

this.getField("why is meal necessary").display = display.visible;

this.getField("cost per person").display = display.visible;

} else {

this.getField("REQUIRED Briefly describe the expense and its business purpose").display = display.visible;

this.getField("food").display = display.hidden;

this.getField("students").display = display.hidden;

this.getField("off campus guests").display = display.hidden;

this.getField("employees").display = display.hidden;

this.getField("spouse partner of employee").display = display.hidden;

this.getField("breakfast").display = display.hidden;

this.getField("lunch").display = display.hidden;

this.getField("dinner").display = display.hidden;

this.getField("light refreshments").display = display.hidden;

this.getField("campus wide").display = display.hidden;

this.getField("attendee list required").display = display.hidden;

this.getField("attach agenda").display = display.hidden;

this.getField("event name").display = display.hidden;

this.getField("benefit to the csu").display = display.hidden;

this.getField("why is meal necessary").display = display.hidden;

this.getField("cost per person").display = display.hidden;

}

Translate

Thom Parker

Community Expert

Is that really the name of the field?

Are there any errors reported in the Console Window? In fact, to debug this, try running that single line of code in the console window.

You'll find a tutorial here on the console

https://www.pdfscripting.com/public/Free_Videos.cfm#JSIntro

If you're still having problems, post this question to a new thread.

Translate

Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often

failing_autodidact

Participating Frequently

Yes, those are the field names. I tried debugger and it didn't return an error. I've posted a new thread. Thanks!

Translate

askytola

Participant

hoping im not too late here, but i need help with a specific issue.

i have two drop down boxes that i want to make the same value by default, but i need to allow the second field to be editable without adjusting the main dropdown box.

Yes or No1 = Yes (then Yes or No2 = Yes by default, but can be selected to no)

Yes or No1 = No (then Yes or No2 = No and only no)

Any help would be a appreciated. New to the Java script stuff and could really use all the help i can get.

Translate

Thom Parker

Community Expert

askytola wrote
hoping im not too late here, but i need help with a specific issue.
...
Any help would be a appreciated. New to the Java script stuff and could really use all the help i can get.

Read the available material and post your question to a new thread.

Translate

Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often

askytola

Participant

i did read above material and even clicked the links you so kindly sent us to with the intent of getting an end user to spend 150$ a year on a membership for basic help. Given knowledge is worth paying for, but to fill a general help thread with what amount as advertisements is petty.

i can definitely open a new thread, but i posted in a thread that i felt most fit my situation after reading multiple different threads.

so please either help someone who is stuck and politely asking for assistance, or move on.

Translate

johnc9100346

Participant

I have a form with 4 options that dictate the visibility for 75 fields each. You mentioned a different method to control visibility for a large number of fields? I'm using Acrobat Pro DC.

Translate

Salmon Gram

Known Participant

I came across this thread looking for a similar answer on this myself. Is there an easier way to set this up for multiple fields? For instance, they first dropdown decision determines the second field, which determines the third, and so on.

Translate

try67

Community Expert

This is called "cascading" and is possible, but requires a more complex script and data model.

If you're interested, I've developed a (paid-for) tool that allows you to set it up easily, based on a spreadsheet with the data, and without having to write any code. You can find it here: Custom-made Adobe Scripts: Acrobat -- Create Cascading Dropdowns

Translate

M

MatLac10492407

Inspiring

Values of "14" and "18" are different than values of 14 and 18. The reason behind this is numbers alone are interpreted as numbers while numbers between "" are interpreted as a strings of character. Maybe it doesn't change anything right now but it's good to know the difference. Let's say you want to make calculations with these numbers, they need to be numbers, not strings.

Luckilly, when you retrieve a value from a field using the getField() method, javascript will interpret it in the most logical way (numbers being numbers) but maybe it's not what you need.

To force a string interpretation, you will use .valueAsString instead of .value OR put the getField() method inside this --> String(put it here). The same thing goes with numbers Number(put it here).

You need to be aware of the return value of the methods you use because sometimes, it switches between string, number, array, bollean.

Translate

J

JulieK_Author

Participating Frequently

So I got it to work, then realized that what I really needed is for a specific value to appear in another form field, based on what is selected in the dropdown. Using my previous example, if the choices in the dropdowns are "WA" and "OR", when "WA" is chosen, I need "18" to appear in a different field and if "OR" is chosen, I need "14" to appear. I hope this makes sense, and again I appreciate any help that you can provide.

Translate

try67

Community Expert

You can use this as that field's custom calculation script:

var v = this.getField("Dropdown Field Name").value;
if (v=="WA") event.value = "18";
else if (v=="OR") event.value = "14";
else event.value = "";

Of course, you'll need to adjust the name of the drop-down field...

Translate

J

JulieK_Author

Participating Frequently

Thank you so much! Part of me wishes I'd realized what I needed from the outset, but now I have another bit of code that I may be able to utilize.

Translate

M

MatLac10492407Correct answer

Inspiring

There are some ways to execute this. the easiest for you would be to add this script to the calculate (calculate tab in properties) event of the field that needs to be hidden. Take notes that everything after "//" is just hints for you to understand the code. You will need to put this script in every field that you want to replicate the behavior, changing the value according to what you want to accomplish. the word "event" means myself for you to understand.

if (this.getField("dropdown").value == "put value here"){ //replace "dropdown" with the name of the dropfield

event.target.display = display.visible;

}

else{

event.target.display = display.hidden;

}

This solution works if you have a small amount of fields. If you manage to have a large number of similar fields, let me know because there are other and faster ways.

Translate

J

JulieK_Author

Participating Frequently

I only have a few fields, so hopefully we can make this solution work. I did run into an issue, though.

On the field I want to show/hide, called "14", I entered the following in the "Calculate - Custom Calculation Script" field. "State#1" is the name of the dropdown field and "Pickles" is the choice within that dropdown field.

if (this.getField("State#1").value = "Pickles"){

event.target.display = display.visible;

}

else{

event.target.display = display.hidden;

}

Doing this resulted in the following error messages:

SyntaxError: missing ) after condition 1:

SyntaxError: missing ) after condition 2:

Not sure what to do from here?!? Thanks for your continued help.

Translate

try67

Community Expert

Change this:

if (this.getField("State#1").value = "Pickles"){

To this:

if (this.getField("State#1").value == "Pickles"){

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.