Highlighted

how to populate drop down list based on multiple text box entries

Community Beginner ,
Feb 23, 2019

Copy link to clipboard

Copied

dropdown.png

hi, i'm having problem on how to auto-populate the drop down list (Wall Assignment) based on the Text box fields (Name). I am using Adobe Acrobat Pro Dc.

The table with Name column is from page 2, while the Wall Assignment drop down, is on page 3.

Whenever the user enters a Name, it will auto-populate the Wall Assignment list.

i saw some post that uses addItems and setItems, but still don't know what to use and where to insert the code. is it on the textbox using keystroke or action javascript, or on the drop down field.

thanks

Adobe Community Professional
Correct answer by Thom Parker | Adobe Community Professional

All items in the dropdown are selectable. That is not the problem.

The issue is that this script is a calculation. The script is run anytime any field on the form changes.

There are 3 solutions:

1)  Change the script to a validation script on the "LstGrp" text fields

2)  Qualify the calculation by testing the source of the event. In this case it should be one of the "LstGrp" fields

3)  (poor solution) Save the value of the list before changing the list items, then set it.

I think #2 is the best one since it blocks unnecessary updates and only changes code in one location.

Put the code in this if statement

if(/^LstGrp/.test(event.source.name))

{

    .. The script...

}

TOPICS
PDF forms, Windows

Views

3.7K

Likes

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

how to populate drop down list based on multiple text box entries

Community Beginner ,
Feb 23, 2019

Copy link to clipboard

Copied

dropdown.png

hi, i'm having problem on how to auto-populate the drop down list (Wall Assignment) based on the Text box fields (Name). I am using Adobe Acrobat Pro Dc.

The table with Name column is from page 2, while the Wall Assignment drop down, is on page 3.

Whenever the user enters a Name, it will auto-populate the Wall Assignment list.

i saw some post that uses addItems and setItems, but still don't know what to use and where to insert the code. is it on the textbox using keystroke or action javascript, or on the drop down field.

thanks

Adobe Community Professional
Correct answer by Thom Parker | Adobe Community Professional

All items in the dropdown are selectable. That is not the problem.

The issue is that this script is a calculation. The script is run anytime any field on the form changes.

There are 3 solutions:

1)  Change the script to a validation script on the "LstGrp" text fields

2)  Qualify the calculation by testing the source of the event. In this case it should be one of the "LstGrp" fields

3)  (poor solution) Save the value of the list before changing the list items, then set it.

I think #2 is the best one since it blocks unnecessary updates and only changes code in one location.

Put the code in this if statement

if(/^LstGrp/.test(event.source.name))

{

    .. The script...

}

TOPICS
PDF forms, Windows

Views

3.7K

Likes

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
Feb 23, 2019 0
Adobe Community Professional ,
Feb 23, 2019

Copy link to clipboard

Copied

Here's a tutorial that covers adding and deleting items from a list. And there is an example file.

https://acrobatusers.com/tutorials/list_and_combo_in_lc

Likes

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
Reply
Loading...
Feb 23, 2019 0
Community Beginner ,
Feb 24, 2019

Copy link to clipboard

Copied

hi, i already saw this example and there's no drop down list in the sample pdf form.

do you have a simple code where in I can populate a drop down list after I enter some text in the textbox?

i only know how to populate a text box field using a drop down list. but I don't know how to populate a drop down.

thanks

Likes

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
Reply
Loading...
Feb 24, 2019 0
Adobe Community Professional ,
Feb 25, 2019

Copy link to clipboard

Copied

List and dropdowns are exactly the same programatically. The code in the example will work for your dropdown.

Likes

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
Reply
Loading...
Feb 25, 2019 0
Community Beginner ,
Feb 26, 2019

Copy link to clipboard

Copied

is there a way where I don't need to use a button to populate the combo box?

like when I enter a name on a textbox, it will automatically added to the combo box?

i tried using the setItems method, but i can only add one entry/data to the combo box. i have 6 text box that needs to be added to the combo box.

i'm not good in using array, can an array do this? if yes, how?

thanks in advance

Likes

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
Reply
Loading...
Feb 26, 2019 0
Adobe Community Professional ,
Feb 26, 2019

Copy link to clipboard

Copied

Yes, the text from a text box can be automatically added to a list.

Here's an example of how it can be done. The code below assumes that each text box represents one entry in the dropdown, so if there are 6 text boxes, there will be a maximum of 6 entries in the dropdown

Do this:

1) All text boxes that are list items are prefixed with "LstGrp.", i.e., "LstGrp.Txt1",  "LstGrp.Txt2", "LstGrp.Txt3",etc.

2) Place this code into the "Custom Calculation" script for the dropdown:

var aValues = this.getField("LstGrp").getArray().map(function(a){return a.valueAsString;});

var aList = aValues.filter(function(a){return (a.length > 0);});

event.target.setItems(aList);

Now any values entered into the text boxes will appear as entries in the dropdown.

Likes

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
Reply
Loading...
Feb 26, 2019 0
Community Beginner ,
Feb 26, 2019

Copy link to clipboard

Copied

if I do this

event.target.setItems(" ",aList);

will it insert a blank value on the first line? so that the dropdown will be viewed as blank/clear, until the user click on it.

thanks

Likes

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
Reply
Loading...
Feb 26, 2019 0
Adobe Community Professional ,
Feb 26, 2019

Copy link to clipboard

Copied

No, but you can insert a blank entry into aList

aList.unshift(" ");

event.target.setItems(aList);

Likes

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
Reply
Loading...
Feb 26, 2019 1
Most Valuable Participant ,
Feb 26, 2019

Copy link to clipboard

Copied

No, setItems only takes one parameter.

You can do it like this:

aList.unshift(" ");

event.target.setItems(aList);


Or even:

event.target.setItems([" "].concat(aList));

Likes

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
Reply
Loading...
Feb 26, 2019 1
Community Beginner ,
Feb 28, 2019

Copy link to clipboard

Copied

the text were added to the dropdown list, however, whenever I select an item to the dropdown list, nothing is selected. only blank is selected.

when i used the first code:

//populate dropdown based on multiple textbox

var aValues = this.getField("LstGrp").getArray().map(function(a){return a.valueAsString;});

var aList = aValues.filter(function(a){return (a.length > 0);});

event.target.setItems(aList);

only the first item is selected.

is there something missing?

Likes

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
Reply
Loading...
Feb 28, 2019 0
Adobe Community Professional ,
Feb 28, 2019

Copy link to clipboard

Copied

Where does you use the code?

Likes

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
Reply
Loading...
Feb 28, 2019 0
Community Beginner ,
Feb 28, 2019

Copy link to clipboard

Copied

code is used to populate the dropdown list, based on several textbox entries

see the image above

Likes

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
Reply
Loading...
Feb 28, 2019 0
Adobe Community Professional ,
Feb 28, 2019

Copy link to clipboard

Copied

Where is the image with the code?

Likes

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
Reply
Loading...
Feb 28, 2019 0
Community Beginner ,
Feb 28, 2019

Copy link to clipboard

Copied

the code is inserted to the dropdown as suggested

Likes

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
Reply
Loading...
Feb 28, 2019 0
Adobe Community Professional ,
Feb 28, 2019

Copy link to clipboard

Copied

You've said multiple things in your post.

"nothing is selected"  , "only blank is selected", "only the first item is selected"

The "setItems()" function uses the first item in the list as the selection. The code is doing exactly what it is supposed too.

If you want something else, then the value of the list must be set with another line of code.

Likes

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
Reply
Loading...
Feb 28, 2019 0
Community Beginner ,
Feb 28, 2019

Copy link to clipboard

Copied

sorry for the confusion.

after it populate the dropdown list, user should be able to choose one among the items in the dropdown list.

i didn't know that it won't allow to select other items aside from the first item in the list.

Likes

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
Reply
Loading...
Feb 28, 2019 0
Community Beginner ,
Feb 28, 2019

Copy link to clipboard

Copied

what should i add to the line of code so that all the items in the dropdown list will be selectable? thanks

Likes

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
Reply
Loading...
Feb 28, 2019 0
Adobe Community Professional ,
Feb 28, 2019

Copy link to clipboard

Copied

All items in the dropdown are selectable. That is not the problem.

The issue is that this script is a calculation. The script is run anytime any field on the form changes.

There are 3 solutions:

1)  Change the script to a validation script on the "LstGrp" text fields

2)  Qualify the calculation by testing the source of the event. In this case it should be one of the "LstGrp" fields

3)  (poor solution) Save the value of the list before changing the list items, then set it.

I think #2 is the best one since it blocks unnecessary updates and only changes code in one location.

Put the code in this if statement

if(/^LstGrp/.test(event.source.name))

{

    .. The script...

}

Likes

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
Reply
Loading...
Feb 28, 2019 0
Community Beginner ,
Mar 01, 2019

Copy link to clipboard

Copied

if(/^LstGrp/.test(event.source.name))

{

//populate dropdown based on multiple textbox

var aValues = this.getField("LstGrp").getArray().map(function(a){return a.valueAsString;});

var aList = aValues.filter(function(a){return (a.length > 0);});

aList.unshift(" ");

event.target.setItems(aList);

}

code works perfectly. thank you.

one last question:

i have 10 dropdowns and it name like this ddDistributionSystemLocation.1 up to ddDistributionSystemLocation.10.

how can I make them readonly = true using array or loop to make the code shorter instead of using this line of codes:

this.getField("ddDistributionSystemLocation.1").readonly = true;

up to

this.getField("ddDistributionSystemLocation.10").readonly = true;

thanks

Likes

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
Reply
Loading...
Mar 01, 2019 0
Adobe Community Professional ,
Mar 01, 2019

Copy link to clipboard

Copied

Just use the group name. It will set the value for all fields in the group.

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

this technique only works for some parameters.

Likes

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
Reply
Loading...
Mar 01, 2019 1
Community Beginner ,
Mar 01, 2019

Copy link to clipboard

Copied

thanks. appreciate all the help

Likes

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
Reply
Loading...
Mar 01, 2019 0
Community Beginner ,
Mar 04, 2019

Copy link to clipboard

Copied

how will I reset the dropdown to blank, when I reset the whole form?

the last entered values still appear to the dropdown list.

i tried adding the code

this.getField("ddWindowsWallAssignment").setItems(" ");

to the reset button

but it won't still remove the list from the dropdown list

thanks

Likes

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
Reply
Loading...
Mar 04, 2019 0
Most Valuable Participant ,
Mar 04, 2019

Copy link to clipboard

Copied

Use the clearItems method, like this:

this.getField("ddWindowsWallAssignment").clearItems();

Likes

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
Reply
Loading...
Mar 04, 2019 0
Community Beginner ,
Mar 04, 2019

Copy link to clipboard

Copied

i also tried that one. it doesn't clear the list

it will only clear the textbox, but the last entered value still appear on the dropdown list

Likes

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
Reply
Loading...
Mar 04, 2019 0
Most Valuable Participant ,
Mar 04, 2019

Copy link to clipboard

Copied

Then there is an error in your code.

Likes

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
Reply
Loading...
Mar 04, 2019 0
Community Beginner ,
Mar 04, 2019

Copy link to clipboard

Copied

there's a custom calculation script on the dropdown fields

if(/^LstGrp/.test(event.source.name))

{

//populate dropdown based on multiple textbox

var aValues = this.getField("LstGrp").getArray().map(function(a){return a.valueAsString;});

var aList = aValues.filter(function(a){return (a.length > 0);});

aList.unshift(" ");

event.target.setItems(aList);

}

then I add this to the reset button:

this.getField("ddWindowsWallAssignment").clearItems();

the list will only clear, if I enter and manually remove the data entered on the textbox

Likes

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
Reply
Loading...
Mar 04, 2019 0
Adobe Community Professional ,
Mar 04, 2019

Copy link to clipboard

Copied

It's possible there are dueling scripts.

I think I said this in an earlier post, that setting the list items is unnecessary and problematic. That you should be setting the field value and locking the field with the "readonly" property when you want it locked down, rather than changing the items. Well now you're seeing the problem, erratic behavior. The easiest way to get the list field to show a blank on reset is to have a "blank" as one of the items, which is then set as the default value.

Likes

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
Reply
Loading...
Mar 04, 2019 1
Community Beginner ,
Mar 04, 2019

Copy link to clipboard

Copied

i see. thanks anyway.

Likes

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
Reply
Loading...
Mar 04, 2019 0
Community Beginner ,
Feb 24, 2019

Copy link to clipboard

Copied

George_Johnson

can you help me on this one? thanks

Likes

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
Reply
Loading...
Feb 24, 2019 0
Community Beginner ,
Feb 26, 2019

Copy link to clipboard

Copied

cool, will try that. thanks

another question, i have a two dropdown list. the entries on the second dropdown will depend on the item selected on the first dropdown.

example entries below:

dropdown1 - A, B, C, D

dropdown2 - 1, 2, 3, 4

if dropdown1 selects A, dropdown2 will have still 4 entries.

if dropdown1 selects B, dropdown2 will only have 1, 2 as entries.

if user selects blank or the form is reset, the entries on dropdown2 will be back at default.

how can I change the entries on dropdown2 based on the selection on dropdown1?

thanks

Likes

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
Reply
Loading...
Feb 26, 2019 0
Adobe Community Professional ,
Feb 26, 2019

Copy link to clipboard

Copied

For this you'll need to use the custom keystroke event on dropdown1, And all dropdowns need to have the "commit selection immediately" option set.

if(event.willCommit)

{

     switch(event.value)

      {

          case "A":

               this.getField("dropdown2").setItems(.. list of items...);

               break;

          case "B":

               this.getField("dropdown2").setItems(.. list of items...);

               break;

      }

}

Handling the form reset is a bit different. You'll need to put code on the reset button to set the list to the default set of items.

Likes

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
Reply
Loading...
Feb 26, 2019 1
Community Beginner ,
Feb 26, 2019

Copy link to clipboard

Copied

will try these codes later.

thanks for the patience

Likes

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
Reply
Loading...
Feb 26, 2019 0
Community Beginner ,
Feb 28, 2019

Copy link to clipboard

Copied

thanks for the codes, i used this one so that the dropdown will also clear/reset whenever the textboxes are cleared

//populate dropdown based on multiple textbox

var aValues = this.getField("LstGrp").getArray().map(function(a){return a.valueAsString;});

var aList = aValues.filter(function(a){return (a.length > 0);});

event.target.setItems([" "].concat(aList));

Likes

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
Reply
Loading...
Feb 28, 2019 0
New Here ,
Aug 13, 2020

Copy link to clipboard

Copied

Hey Thom,  I know this is an old string, but your guidance saved me today - thanks for sharing your expertise.  

Likes

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
Reply
Loading...
Aug 13, 2020 1