• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
3

show/hide fields based on drop down choices

Community Beginner ,
Jun 11, 2014 Jun 11, 2014

Copy link to clipboard

Copied

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.

TOPICS
Acrobat SDK and JavaScript , Windows

Views

42.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Engaged , Jun 11, 2014 Jun 11, 2014

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").valu

...

Votes

Translate

Translate
Engaged ,
Jun 11, 2014 Jun 11, 2014

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 11, 2014 Jun 11, 2014

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 11, 2014 Jun 11, 2014

Copy link to clipboard

Copied

Change this:

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

To this:

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 11, 2014 Jun 11, 2014

Copy link to clipboard

Copied

Made that change, now I get the following error.


this.getField("State#1") is null
1:AcroForm:18:CalculateException in line 1 of function top_level, script AcroForm:18:Calculate

TypeError: this.getField("State#1") is null
1:AcroForm:18:Calculate

Is there a place I can post the file, if that would make it easier? Also, why does it need two "=" signs?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 11, 2014 Jun 11, 2014

Copy link to clipboard

Copied

That means there's no field in your file called "State#1". If you're getting this name from the fields list in Form Edit mode, the "#1" part just means that it's a copy of another field called "State", and that's the name you should use.

In JS, "=" is the assignment operator. "==" is the comparison operator.

You can post the file to a file-sharing website (dropbox, acrobat.com, etc.) and then post the link to it here.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 11, 2014 Jun 11, 2014

Copy link to clipboard

Copied

Thank you, Gilad D. for the help and extra information, too.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 11, 2014 Jun 11, 2014

Copy link to clipboard

Copied

also, if "==" could be roughly translated to "is", "!=" would mean "is not".

JavaScript is Case sensitive so make sure you did not name your field STATE#1 instead.  It's a pretty common error.  Try not to use special characters when naming fields.  Stick to standards.  I personnally always name fields with capital letters and numbers using identation like

MYFORM.PLACE.NUMBER

MYFORM.PLACE.ADDRESS

MYFORM.SEX.MALE

MYFORM.SEX.FEMALE

This is really useful if you have lots of fields related to one another.  You can then apply methods to entire groups of fields in one simple line of code.

For example this.getField("MYFORM").display = display.hidden would hide all four fields.  It works kind of the same way as folders unside your computer.

Finally, "#" is generally used as widget identification.  I think this is what happened.  If you copy a field, it retains the same name and some of its charateristics but acrobat will assign them a number called widget.  The original field State will get the identification State#0 in the right pane as it is 0-based.  The copie will be identified State#1.  You must understand that the name of the field is still "State".  Some methods (actions you can code) let you determine the widget number for targetting a specific field from those you copied.  It is not the case here.  So for disambiguation, you should name your fields different name like STATE1 and STATE2, or STATE.1 and STATE.2 if you plan to use what I wrote about earlier.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 11, 2014 Jun 11, 2014

Copy link to clipboard

Copied

Thank you for the help and extra information. I was able to get it to work! I definitely need to learn JavaScript.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 13, 2022 Dec 13, 2022

Copy link to clipboard

Copied

How can we add more dropdown fields to this code, like Pickles#2
 
 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 14, 2022 Dec 14, 2022

Copy link to clipboard

Copied

quote
How can we add more dropdown fields to this code, like Pickles#2
 
 

By @Hossein5FC0

 

This thread is getting a little long and overused.  Could you please create a new thread, and describe the required behavior in detail.

 

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 30, 2017 Oct 30, 2017

Copy link to clipboard

Copied

"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."

Can you explain these faster ways please?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 31, 2018 May 31, 2018

Copy link to clipboard

Copied

I'd be interested in alternate ways. Specifically, I notice the Validation code doesn't run when a selection is made from a menu, unless the enter key is pressed. Selecting with a mouse does not trigger the code, nor does adding the code to a mouse Action, which only runs when the field is clicked. Not sure what Mouse Enter refers to, but didn't appear to solve issue.

Basically I want a dynamic field to change as selections are made by any means? Are there any events or actions I can trigger or consume?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 31, 2018 May 31, 2018

Copy link to clipboard

Copied

It will, if you tick the option to commit the selected value immediately, under the field's Properties, Options tab.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 31, 2018 May 31, 2018

Copy link to clipboard

Copied

Thankyou, works perfectly. 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 31, 2018 May 31, 2018

Copy link to clipboard

Copied

You could use the setItems() method of the field object instead of hiding and showing fields.  The setItems() method will change the choices of a dropdown menu dynamically by inserting the elements of an array as choices

For example, let's say you have 2 dropdown fields named "food.type" and "food.name"

if (this.getField("food.type").value = "fruits"){

   this.getField("food.name").setItems([" ", "Apple", "Oranges", "Bananas"])

}

else if (this.getField("food.type").value = "vegetables"){

   this.getField("food.name").setItems([" ", "Potatoes", "Carotts", "cabbage"])

}

the choice you make in the first field changes what is available in the second field

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

There are errors in your code. You used the value assignment operator instead of the comparison operator.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 01, 2018 Jun 01, 2018

Copy link to clipboard

Copied

True.thanks

if (this.getField("food.type").value == "fruits"){

   this.getField("food.name").setItems([" ", "Apple", "Oranges", "Bananas"])

}

else if (this.getField("food.type").value == "vegetables"){

   this.getField("food.name").setItems([" ", "Potatoes", "Carotts", "cabbage"])

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 02, 2018 Jun 02, 2018

Copy link to clipboard

Copied

Also, if this is the custom validation script of "food.type" then you should use event.value instead of this.getField("food.type").value .

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 08, 2020 Aug 08, 2020

Copy link to clipboard

Copied

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 or will only function for the last value in the syntax. I am a complete novice so the fix can be easy, but I am not knowledgeble enough. Thank you in advance or any advice.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 08, 2022 Dec 08, 2022

Copy link to clipboard

Copied

I'm doing something similar with 10 fields and might need the other and faster ways you mentioned. I have a dropdown with 10 options, but I need the fields to be visible in succession. For example, if "1" is selected from the dropdown, then I need "field1" to be visible and the other 9 hidden. If "2" is selected, then I need "field1" and "field2" to be visible while the other 8 are hidden. I need this same pattern all the way up to "field10"

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 08, 2022 Dec 08, 2022

Copy link to clipboard

Copied

The first thing to do is to name the form fields in such a way that it is easy to identify all of the fields involved in this process, and to relate dropdown selections with the fields. It looks like you're already done this to a certain extent, although "field1", "field2", etc. are probably not the best names, but they are usable.

 

Here's a sample Valiation script for the dropdown that will provide the required behavior.

  

var nLimit = 0;
var nNumFields = 10;
if((event.value != "") && !isNaN(event.value))
    nLimit = Number(event.value);

for(var i=1;i<=nNumFields;i++)
{
    this.getField("field" + i).hidden = (i>nLimit);
}

 

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 08, 2022 Dec 08, 2022

Copy link to clipboard

Copied

I'm doing something similar with 10 fields and might need the other and faster ways you mentioned. I have a dropdown with 10 options, but I need the fields to be visible in succession. For example, if "1" is selected from the dropdown, then I need "field1" to be visible and the other 9 hidden. If "2" is selected, then I need "field1" and "field2" to be visible while the other 8 are hidden. I need this same pattern all the way up to "field10"

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 08, 2022 Dec 08, 2022

Copy link to clipboard

Copied

Be sure to set the dropdown to "Commit selected item immediately", on the option tab of the field properties dialog. 

 

 

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 16, 2022 Dec 16, 2022

Copy link to clipboard

Copied

I'm still a beginner with this so I'm probably overlooking something obvious to others. I changed the field names to SDP1, SDP2, etc., checked the "Commit selected item immediately box", and put the name of my first field in the "". What am I missing? 

 

var nLimit = 0;
var nNumFields = 10;
if((event.value != "") && !isNaN(event.value))
nLimit = Number(event.value);

for(var i=1;i<=nNumFields;i++)
{
this.getField("SDP1" + i).hidden = (i>nLimit);
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines