Log in
💬Help
AAABIT
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: (there should be 8 colors, 5 provided incrementally)

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.

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

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

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(...):

↑ Menu
Previous edition ↓