Dynamically populate a second field after populating the first

You can dynamically populate a second field after populating the first using scripting. For example, you can have one drop-down list that shows users a list of countries. After a user selects a country, the second list shows the states or provinces for that country.

For example, the sample XML file you connect to could have the following defined:

<MyData> 
      <country/> 
      <countries> 
         <item uiname="United States" token="US"/> 
         <item uiname="Vietnam" token="SRV"/> 
      </countries> 
      <state/> 
      <US> 
         <item>California</item> 
         <item>New York</item> 
         <item>Texas</item> 
      </US> 
      <SRV> 
         <item>An Giang</item> 
         <item>Bac Giang</item> 
         <item>Bac Kan</item> 
      </SRV> 
</MyData>

For example, after you select Vietnam from the first drop-down list, the items listed in the States/Provinces list show only the ones that apply to Vietnam.

View full size graphic

Before you perform this task, you must ensure the following settings are in effect:

Ensure active labels are on. See Set up dynamic properties.
Ensure you are connected to a data source that describes the data to which form object properties will be bound. See Connecting to a data source.
To test the form with sample data, ensure you are pointing to a data file that has data defined for the form object property. See To preview a form using sample data.

To set up the first field

In the Object Library palette, click the Standard category and drag a Drop-Down List or a List Box onto the form design.

For example, insert a Drop-Down List.
(Optional) In the Object palette, click the Field tab and type a caption for the object in the Caption box.

For example, type Country.
Do one of the following actions:
- Click the List Items active label in the Field tab of the Object palette.
- Click the Specify Item Values active label in the Binding tab of the Object palette.
Select the data connection.

Note: If you are not already connected to a data source, Default Data Binding is the only selection in the Data Connection list.
Click the triangle beside the Items box and select a binding.

The binding you select should be a repeating data value or group so that the drop-down list or list box shows more than one item.

For example, select countries > item.

View full size graphic
The following string appears in the Items box:

$record.countries.item[*]

You could type this string into the Items box instead of selecting it.
Note: For OLEDB data connections, the Items box is not available. Use the Item Text and Item Value boxes to select the database columns to use to populate the list.
To show a user-friendly item name at run time, click the triangle beside the Item Text box and select a binding.

For example, select @uiname to show United States.
(Optional) To save a different value than the Item Text label to the data source, click the triangle beside the Item Value box and select a binding.

For example, select @token to save US to the data file.
Click OK.

After a binding has been set, a small link icon appears with the active label.

To set up the script that dynamically populates a second field after populating the first

With the first drop-down list selected, in the Script Editor, select Change from the Show list.
Select JavaScript from the Language list.

Type the following script:

var tempString = "xfa.record." + this.boundItem(xfa.event.newText); 
var oItems = xfa.resolveNode(tempString); 
var nItemsLength = oItems.nodes.length; 
 
DropDownList2.clearItems(); 
 
for (var nItemCount = 0; nItemCount < nItemsLength; nItemCount++) { 
      DropDownList2.addItem(oItems.nodes.item(nItemCount).value); 
}

Script	Description
`tempString`	Specifies the string for xfa.record. For example, if United States is selected, xfa.record becomes xfa.record.US.
`this.boundItem`	A list object method that translates from the user-friendly name to the value or token string. For example, when United States is selected, US is submitted.
`xfa.event.newText`	Returns the new text content of the list Change event. For example, when United States is selected, United States is submitted.
`var nItemsLength = oItems.nodes.length;`	Queries the number of child elements of <US> (or <SRV>), that is the number of <item> children.
`DropDownList2.clearItems();`	Removes any existing items in the second drop-down list.
`for (var nItemCount = 0; nItemCount < nItemsLength; nItemCount++)`	Queries for each <item> child of <US> (or <SRV>).
`DropDownList2.addItem(oItems.nodes.item(nItemCount).value);`	Gets the text value of the <item> child indicated by the nItemCount index and adds that value as a new item to the second drop-down list

To set up the second field

In the Object Library palette, click the Standard category and drag a Drop-Down List or a List Box onto the form design.

For example, insert a Drop-Down List.
(Optional) In the Object palette, click the Field tab and type a caption for the object in the Caption box.

For example, type States/Provinces.
Bind the field to the data source.

For example, bind the state node to the States/Provinces drop-down list.
View the form in the Preview PDF tab.