11 Replies Latest reply on Dec 29, 2014 2:40 PM by gkaiseril

    How do I use Javascript to populate a text field based on a selection from a drop down box?

    timothy.flohrschutz

      Greetings,

       

      I have virtually no experience with JavaScript and I am trying to figure out how to add some basic automation features to an Adobe form.  I have a drop down box called "Hospital_Name" that will contain approximately 7 possible selections.  When the user makes a selection, I would like to have the text field (called "Hospital_Address") below the drop down box populate with the corresponding address for the selection.  I have the "Hospital_Address" text field configured for multiple lines and would like the address to have a line break between the street address and the city/state/zip.

       

      For example, if the user selected "Hospital 1", the text field would display:

       

      123 Main St

      Anytown, CA 12345

       

      Any help or examples you can provide would be greatly appreciated.

        • 2. Re: How do I use Javascript to populate a text field based on a selection from a drop down box?
          timothy.flohrschutz Level 1

          Thanks for the assist.  I've followed the tutorial and generated the following code which is producing a syntax error which states that there is an invalid property id (Line 3 begins with "function."  Any idea what I'm missing?

           

          // Place all pre-population data into a single data structure

          var Location = { --Hospital--:{ line1: " ", line2: " " }, { Bellevue Medical Center:{ line1: "2500 BMC Drive", line2: "Bellevue, NE 68123" }, { CHI Bergan Mercy:{ line1: "7500 Mercy Road", line2: "Omaha, NE 68124" }, { CHI Immanuel:{ line1: "6901 N. 72nd Street", line2: "Omaha, NE 68122" }, { CHI Lakeside:{ line1: "16901 Lakeside Hills Court", line2: "Omaha, NE 68130" }, { CHI Midlands:{ line1: "11111 S. 84th Street", line2: "Papillion, NE 68046" }, { Creighton University Medical Center:{ line1: "601 N. 30th Street", line2: "Omaha, NE 68131" }, { Nebraska Medical Center:{ line1: "4400 Emile Drive", line2: "Omaha, NE 68105" }};

          function SetFieldValues (cHospitalName)

          {

              this.getField("AddLine1").value = Location[cHospitalName].line1;

              this.getField("AddLine2").value = Location[cHospitalName].line2;

          }

          • 3. Re: How do I use Javascript to populate a text field based on a selection from a drop down box?
            try67 MVP & Adobe Community Professional

            You need to place double-quotes around all the strings like "Hospital"

            and "Bellevue Medical Center"...

             

            On Mon, Dec 29, 2014 at 1:25 AM, timothy.flohrschutz <

            • 4. Re: How do I use Javascript to populate a text field based on a selection from a drop down box?
              timothy.flohrschutz Level 1

              I made the suggested changes and I'm still receiving the same error "Syntax Error: invalid property id" "2: at line 3" for the second section of code.

               

              Here is the code I have in the Custom Keystroke Script for the drop down called "Hospital_Name":

               

              if( event.willCommit ) {

                  if(event.value == " ") this.resetForm(["AddLine1","AddLine2"]); else SetFieldValues(event.value);

              }

               

              Here is this most recent code I tried in the Document JavaScript field:

               

              // Place all pre-population data into a single data structure

              var Location = { "--Hospital--":{ line1: " ", line2: " " }, { "Bellevue Medical Center":{ line1: "2500 BMC Drive", line2: "Bellevue, NE 68123" }, { "CHI Bergan Mercy":{ line1: "7500 Mercy Road", line2: "Omaha, NE 68124" }, { "CHI Immanuel":{ line1: "6901 N. 72nd Street", line2: "Omaha, NE 68122" }, { "CHI Lakeside":{ line1: "16901 Lakeside Hills Court", line2: "Omaha, NE 68130" }, { "CHI Midlands”:{ line1: "11111 S. 84th Street", line2: "Papillion, NE 68046" }, { "Creighton University Medical Center":{ line1: "601 N. 30th Street", line2: "Omaha, NE 68131" }, { "Nebraska Medical Center":{ line1: "4400 Emile Drive", line2: "Omaha, NE 68105" }};

              function SetFieldValues(Hospital_Name)

              {

                  this.getField("AddLine1").value = Location[Hospital_Name].line1;

                  this.getField("AddLine2").value = Location[Hospital_Name].line2;

              }

              • 5. Re: How do I use Javascript to populate a text field based on a selection from a drop down box?
                gkaiseril MVP & Adobe Community Professional

                Are you sure you have all the field names correctly spelled and capitalized?

                 

                Are there any errors in the JavaScript console?


                All the form field in a PDF are processed by using JavaScript and any error in any script will stop JavaScript processing.

                 

                It might help to have a link to the problem form.

                 

                Make sure your brackets are properly placed and matched.

                 

                // Place all pre-population data into a single data structure
                var Location = {
                "--Hospital--":{ line1: " ", line2: " " },
                "Bellevue Medical Center":{ line1: "2500 BMC Drive", line2: "Bellevue, NE 68123" },  "CHI Bergan Mercy":{ line1: "7500 Mercy Road", line2: "Omaha, NE 68124" }, 
                "CHI Immanuel":{ line1: "6901 N. 72nd Street", line2: "Omaha, NE 68122" }, 
                "CHI Lakeside":{ line1: "16901 Lakeside Hills Court", line2: "Omaha, NE 68130" },  "CHI Midlands”:{ line1: "11111 S. 84th Street", line2: "Papillion, NE 68046" },
                "Creighton University Medical Center":{ line1: "601 N. 30th Street", line2: "Omaha, NE 68131" },
                "Nebraska Medical Center":{ line1: "4400 Emile Drive", line2: "Omaha, NE 68105" }
                };

                function SetFieldValues(Hospital_Name) {
                    this.getField("AddLine1").value = Location[Hospital_Name].line1;
                    this.getField("AddLine2").value = Location[Hospital_Name].line2;
                }

                 

                This is not a beginners task but requires a fair amount of knowledge about the structure of objects, defining strings, and structure of arrays.

                • 6. Re: How do I use Javascript to populate a text field based on a selection from a drop down box?
                  timothy.flohrschutz Level 1

                  I located a misplaced comma within the first variable.  I corrected it and now I'm receiving the following error: "missing } after property list."

                   

                  There are only two text fields (AddLine1 and AddLine2) which are both spelled and capitalized correctly.

                   

                  The only errors that I see in the JavaScript Debugger console is the error that I have listed above.

                  • 7. Re: How do I use Javascript to populate a text field based on a selection from a drop down box?
                    gkaiseril MVP & Adobe Community Professional

                    You have the element names within the object within brackets.

                     

                    Make sure your brackets are properly placed and matched.

                     

                    // Place all pre-population data into a single data structure
                    var Location = {
                    "--Hospital--":{ line1: " ", line2: " " },
                    "Bellevue Medical Center":{ line1: "2500 BMC Drive", line2: "Bellevue, NE 68123" },

                    "CHI Bergan Mercy":{ line1: "7500 Mercy Road", line2: "Omaha, NE 68124" }, 
                    "CHI Immanuel":{ line1: "6901 N. 72nd Street", line2: "Omaha, NE 68122" }, 
                    "CHI Lakeside":{ line1: "16901 Lakeside Hills Court", line2: "Omaha, NE 68130" }, 

                    "CHI Midlands":{ line1: "11111 S. 84th Street", line2: "Papillion, NE 68046" },
                    "Creighton University Medical Center":{ line1: "601 N. 30th Street", line2: "Omaha, NE 68131" },
                    "Nebraska Medical Center":{ line1: "4400 Emile Drive", line2: "Omaha, NE 68105" }
                    };

                    // some debugging code to see location names;

                    console.show();console.clear():

                    for(I in Location) {

                    console.println(I);

                    }

                    // end debugging code;

                     

                    function SetFieldValues(Hospital_Name) {
                        this.getField("AddLine1").value = Location[Hospital_Name].line1;
                        this.getField("AddLine2").value = Location[Hospital_Name].line2;
                    }

                     

                    This is not a beginners task but requires a fair amount of knowledge about the structure of objects, defining strings, and structure of arrays.

                     

                    Are you sure you have all the field names correctly spelled and capitalized?

                     

                    Do you get any error in the JavaScript console?

                     

                    Just trying the line that defines the "Location", I get the following error:

                     

                     

                    SyntaxError: invalid property id

                    1:Console:Exec

                    undefined

                     


                    All the form field in a PDF are processed by using JavaScript and any error in any script will stop JavaScript processing.

                     

                    It might help to have a link to the problem form.

                     

                    Make sure your brackets are properly placed and matched.

                     

                    // Place all pre-population data into a single data structure
                    var Location = {
                    "--Hospital--":{ line1: " ", line2: " " },
                    "Bellevue Medical Center":{ line1: "2500 BMC Drive", line2: "Bellevue, NE 68123" },

                    "CHI Bergan Mercy":{ line1: "7500 Mercy Road", line2: "Omaha, NE 68124" }, 
                    "CHI Immanuel":{ line1: "6901 N. 72nd Street", line2: "Omaha, NE 68122" }, 
                    "CHI Lakeside":{ line1: "16901 Lakeside Hills Court", line2: "Omaha, NE 68130" }, 

                    "CHI Midlands":{ line1: "11111 S. 84th Street", line2: "Papillion, NE 68046" },
                    "Creighton University Medical Center":{ line1: "601 N. 30th Street", line2: "Omaha, NE 68131" },
                    "Nebraska Medical Center":{ line1: "4400 Emile Drive", line2: "Omaha, NE 68105" }
                    };

                    function SetFieldValues(Hospital_Name) {
                        this.getField("AddLine1").value = Location[Hospital_Name].line1;
                        this.getField("AddLine2").value = Location[Hospital_Name].line2;
                    }

                    • 9. Re: How do I use Javascript to populate a text field based on a selection from a drop down box?
                      gkaiseril MVP & Adobe Community Professional

                      You are missing the document level script that defines the data object and the setItems function.

                       

                      // document level JavaScript; Could be placed in the page open action if you cannot access the document level JavaScripts;

                      // Place all pre-population data into a single data structure
                      var Location = {
                      "--Hospital--": { line1: " ", line2: " " },
                      "Bellevue Medical Center": { line1: "2500 BMC Drive", line2: "Bellevue, NE 68123" },

                      "CHI Bergan Mercy": { line1: "7500 Mercy Road", line2: "Omaha, NE 68124" }, 
                      "CHI Immanuel": { line1: "6901 N. 72nd Street", line2: "Omaha, NE 68122" }, 
                      "CHI Lakeside": { line1: "16901 Lakeside Hills Court", line2: "Omaha, NE 68130" },

                      "CHI Midlands": { line1: "11111 S. 84th Street", line2: "Papillion, NE 68046" },
                      "Creighton University Medical Center":{ line1: "601 N. 30th Street", line2: "Omaha, NE 68131" },
                      "Nebraska Medical Center": { line1: "4400 Emile Drive", line2: "Omaha, NE 68105" }
                      };

                      function SetFieldValues(Hospital_Name) {
                          this.getField("AddLine1").value = Location[Hospital_Name].line1;
                          this.getField("AddLine2").value = Location[Hospital_Name].line2;
                      }

                      // end document level scripts;

                       

                      // custom keystroke script;

                      if( event.willCommit ) {

                          if(event.value == " ") this.resetForm(["AddLine1","AddLine2"]); else SetFieldValues(event.value);

                      }

                      // end custom keystroke script;

                       

                      Note the formatting some items in a columnar like line can help one review the code. Also use a text editor for processing the code.

                      • 10. Re: How do I use Javascript to populate a text field based on a selection from a drop down box?
                        timothy.flohrschutz Level 1

                        I don't see what changed in the code, but it seems to work now.  I am extremely appreciative for your help.  Thank you.

                        • 11. Re: How do I use Javascript to populate a text field based on a selection from a drop down box?
                          gkaiseril MVP & Adobe Community Professional

                          Your code:

                           

                          var Location = { "--Hospital--":{ line1: " ", line2: " " },

                          { "Bellevue Medical Center":{ line1: "2500 BMC Drive", line2: "Bellevue, NE 68123" },

                          { "CHI Bergan Mercy":{ line1: "7500 Mercy Road", line2: "Omaha, NE 68124" },

                          { "CHI Immanuel":{ line1: "6901 N. 72nd Street", line2: "Omaha, NE 68122" },

                          { "CHI Lakeside":{ line1: "16901 Lakeside Hills Court", line2: "Omaha, NE 68130" },

                          { "CHI Midlands”:{ line1: "11111 S. 84th Street", line2: "Papillion, NE 68046" },

                          { "Creighton University Medical Center":{ line1: "601 N. 30th Street", line2: "Omaha, NE 68131" },

                          { "Nebraska Medical Center":{ line1: "4400 Emile Drive", line2: "Omaha, NE 68105" }

                          };

                           

                          The "{" before the hospital name was removed. So 7 instances of "{" were removed.