Hide fields with a dropdown box

New Here ,
Oct 11, 2017 Oct 11, 2017

Copy link to clipboard

Copied

in an acrobat form I am trying to hide fields depending on the choice of a dropdown box. I'm using Acrobat XI, can you help me?

On the dropdownbox I have 3 possible answers and depending on which one is chosen i want to hide some Text fields

TOPICS
PDF forms

Views

5.1K

Likes

translate

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

Most Valuable Participant , Oct 12, 2017 Oct 12, 2017
Change the first line of the code to:switch(event.value) {

Likes

translate

Translate

Translate
Explorer ,
Oct 11, 2017 Oct 11, 2017

Copy link to clipboard

Copied

You'll need to establish "export values" for each Item in your Dropdown list under the "Options" tab in the properties.  The javascript code below will go in "Custom Calculation Script" under the "Calculate" tab.  I did this in Adobe Acrobat DC but the javascript should work the same in XI.

Crude method, but works.  With only three options it will suffice and not be all that confusing.  "Drop" is the name of the Dropdown box, "T1" and "T2" are the text boxes.  The fields will appear/disappear when the dropdown box is no longer selected (clicking or tabbing elsewhere).  You can create another "else if" to state specifically the third option, or just use the "else" (if you have a default blank value, you'll want the extra "else if" condition and then an "else" to handle the blank default).

if (this.getField("Drop").value=="A") {

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

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

}

else if (this.getField("Drop").value=="B") {

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

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

}

else {

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

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

}

More "elegant" using switch/case.  Again, the fields will change when the focus moves from the dropdown box.  You can set up another case before the default to handle the third condition if you

switch(this.getField("Drop").value) {

     case "A":

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

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

          break;

     case "B":

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

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

          break;

     default:

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

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

          break;

}

You can add extra text fields and substitute in the field names you are using in your document.  Hope it helps!

Likes

translate

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 ,
Oct 12, 2017 Oct 12, 2017

Copy link to clipboard

Copied

Thank you very much for your help. I´m trying the first javascript option, but it's not working correctly. Regardless of the option I choose in the dropbox the fields are randomly visible or randomly hidden. I´m not sure if i understand what do you mean by " establish "export values". Should they be equal to the name of the field? Is it to mush to ask if I can send you my file for you to identify what am i doing wrong? Thank you so much.

Likes

translate

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 ,
Oct 12, 2017 Oct 12, 2017

Copy link to clipboard

Copied

The name of the option is probably the value unless you explicitly set export values.

If your dropdown box is named State, and the options are CA, FL, TX, then you'd call them with:

this.getField("State").value --- gives value of "State" drop down

your if statements will be like: this.getField("State").value=="CA" --- has to have the double equals (==)

The display properties of display.hidden and display.visible do exactly what they suggest, setting the property to hidden or visible.  For each if statement, you'll have to explicitly declare each of your text fields.

Likes

translate

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 ,
Oct 12, 2017 Oct 12, 2017

Copy link to clipboard

Copied

Thank you again for your help. I apologize for the inconvenience and for my ignorance. I'm starting "baby steps" in the javascript world   and I know very little. However I tried the second option that you me sent to me and the problem  is the same: for every option i choose in the dropbox, I get different results. The code i´m using is:

switch(this.getField("deslocacao").value) {

case " ":

  1. this.getField("dias").display=display.hidden;
  2. this.getField("noestrangeiro").display=display.hidden;
  3. this.getField("valorac").display=display.hidden;
  4. this.getField("nopais").display=display.hidden;

break;

case "estrangeiro":

  1. this.getField("dias").display=display.visible;
  2. this.getField("noestrangeiro").display=display.visible;
  3. this.getField("valorac").display=display.visible;
  4. this.getField("nopais").display=display.hidden;

break;

case "país (distância superior a 40km)":

  1. this.getField("dias").display=display.hidden;
  2. this.getField("noestrangeiro").display=display.hidden;
  3. this.getField("valorac").display=display.hidden;
  4. this.getField("nopais").display=display.visible ;

break;

default:

  1. this.getField("dias").display=display.visible;
  2. this.getField("noestrangeiro").display=display.visible;
  3. this.getField("valorac").display=display.visible;
  4. this.getField("nopais").display=display.visible;

break;

  }

but when I choose "estrangeiro" on my dropbox the text field visible is "nopais", and sometimes none, other times "noestrangeiro" and "valorac" and"dias". And the same happens when I choose any other option of the dropdown box. The fields visible are not the correct ones and they are not the same for the same option of the dropbox.

Likes

translate

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 ,
Oct 12, 2017 Oct 12, 2017

Copy link to clipboard

Copied

The code looks fine (I'm presuming the A, B, C, D in each case aren't in the actual code).  I think you may be running into the issue of the fields not changing settings when the field is changed but when the focus gets lost (tabbing out, clicking elsewhere).  I haven't worked with background coding the "onchange" event so hopefully someone else may be able to provide input there.

Likes

translate

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
Most Valuable Participant ,
Oct 12, 2017 Oct 12, 2017

Copy link to clipboard

Copied

Go to the Properties of the drop-down and under the Options tab tick the box to commit the selected value immediately and it will solve this issue.

Likes

translate

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 ,
Oct 12, 2017 Oct 12, 2017

Copy link to clipboard

Copied

Thank so much for your help, but the problem remains

Likes

translate

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
Most Valuable Participant ,
Oct 12, 2017 Oct 12, 2017

Copy link to clipboard

Copied

Change the first line of the code to:

switch(event.value) {

Likes

translate

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 ,
Oct 12, 2017 Oct 12, 2017

Copy link to clipboard

Copied

IT WORKED!!! Thank you so much!!!

Likes

translate

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 ,
Mar 03, 2018 Mar 03, 2018

Copy link to clipboard

Copied

Hello, pls do not be disturbed by my question here, i have similar problem as this thread but i still cannot figure how to successfully use this information, can you pls assist me. i have a dropdown list having "Company Profile, Business Plan, Business Proposal, Simple Agreement, Incorpofration of Company, Marketing Content, Event Brochure" i would like to know how i can do this in way that when any of these menu item is selected thats only the selected field will show.

I just do not want any of the rest of the fields to show except the first page where they can see the dropdown and make selection. All other about 8 pages to be hidden until selection is made and corresponding field only shows.

Thank  you!

Likes

translate

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
Adobe Community Professional ,
Mar 05, 2018 Mar 05, 2018

Copy link to clipboard

Copied

Read these two articles:

https://acrobatusers.com/tutorials/change_another_field

https://acrobatusers.com/tutorials/show_hide_fields

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

Likes

translate

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 ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

Hello Thom--
I'm new to JavaScript. I've been looking at the acrobatusers articles you've linked. Thank you for sharing them. 

On your Radio Button example, I don't understand where to make the box "SpouseInfoBlk" so that I can toggle it as "field". Can you talk further about that please? When I make one in the Edit Tool, I cannot access it's properties in the Prepare Form tool. 

 

Second question: How would one make this a required field only when it's visible? Is that done as a validation written into my "Submit" button based on the toggle that makes it visible, please?

Likes

translate

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