13 Replies Latest reply on Oct 30, 2017 8:12 PM by Red_Right_Arm

    show/hide fields based on drop down choices

    JulieK. Level 1

      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.

        • 1. Re: show/hide fields based on drop down choices
          MatLac Level 1

          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.

          • 2. Re: show/hide fields based on drop down choices
            JulieK. Level 1

            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.

            • 3. Re: show/hide fields based on drop down choices
              try67 MVP & Adobe Community Professional

              Change this:

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

               

              To this:

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

              • 4. Re: show/hide fields based on drop down choices
                JulieK. Level 1

                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?

                • 5. Re: show/hide fields based on drop down choices
                  try67 MVP & Adobe Community Professional

                  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.

                  • 6. Re: show/hide fields based on drop down choices
                    MatLac Level 1

                    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.

                    • 7. Re: show/hide fields based on drop down choices
                      JulieK. Level 1

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

                      • 8. Re: show/hide fields based on drop down choices
                        JulieK. Level 1

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

                        • 9. Re: show/hide fields based on drop down choices
                          JulieK. Level 1

                          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.

                          • 10. Re: Re: show/hide fields based on drop down choices
                            try67 MVP & Adobe Community Professional

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

                            • 11. Re: show/hide fields based on drop down choices
                              JulieK. Level 1

                              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.

                              • 12. Re: show/hide fields based on drop down choices
                                MatLac Level 1

                                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.

                                • 13. Re: show/hide fields based on drop down choices
                                  Red_Right_Arm Level 1

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