Assorted digital displays showing
numbers in different colours,
format and pixellation
sciencestockphotos.com
2011-03-07 13:35
CC-BY-3.0

Example 19: Prefilling form data

---

Regarding fetching data from external resources, the specification states:

There are two scenarios where authors may wish data to be fetched from an external file to fill forms. In the first, a select's options are replaced by options from an external file. In the second, a form's values are prefilled from an external data source.

In both cases, the prefilling may either be full, in which case the previous contents are removed first, or incremental, in which case the fetched data is in addition to the data already in the form.

This example/ test suite module is not currently working, because the Javascript code for emulating the data attribute (importing XML data from external sources) has been temporarily removed from the Javascript library, DOM-Repetition.min.js — we might reinstate this functionality in the future.

---

Filling select elements

States and provinces: (3 states, 2 provinces)

Colors: Orange Yellow Purple (there should be 8 colors, 5 provided incrementally)

Submit

Seeding a form with initial values

The formdata XML file associated with the following form first clears all of the existing repetition blocks. Then it adds two repetition blocks with indexes 100 and 101. Then it prefills the values of these two repetition blocks.

Only the first two options of the select element below should be selected. The last option has a selected attribute set, but as per the spec, it should be cleared:
test test test

Last two checkboxes below should be checked (prefilling failed if only "Red" is checked): Red Green Blue

The "Evening" button should be selected (prefilling failed if "Afternoon" is checked): Morning Afternoon Evening Night

Datetime (should be empty since invalid field value provided):

Week (should be prefilled):

Setting data DOM property dynamically on select elements

The following tests are adapted from an example in the Filling select elements section. The eight following select elements should have exactly the same contents. Note that only the first four will work in Internet Explorer 7.

1. Loading... Before onload, data DOM attribute set on statically created element:
2. Loading... Before onload, data content attribute set on statically created element:
3. Loading... Before onload, select element dynamically created; data DOM attribute set:
4. Loading... Before onload, select element dynamically created; data content attribute set with setAttribute(...):
5. Loading... After onload, data DOM attribute set on statically created element:
6. Loading... After onload, data content attribute set on statically created element:
7. Loading... After onload, select element dynamically created; data DOM attribute set:
8. Loading... After onload, select element dynamically created; data content attribute set with setAttribute(...):

---