|
@@ -7,27 +7,33 @@ Extract form values through the DOM. |
|
|
## Motivation |
|
|
## Motivation |
|
|
|
|
|
|
|
|
Forms are used to package related data, typically sent to an external location or processed internally. In the browser, |
|
|
Forms are used to package related data, typically sent to an external location or processed internally. In the browser, |
|
|
the default behavior of submitting form data is not always preferred, as this is done through loading a document, |
|
|
|
|
|
typically the same document, as soon as the form is submitted. In addition, [applications have limited control over how |
|
|
|
|
|
the data are formatted on submission](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-fs-enctype) |
|
|
|
|
|
with this approach. This is why the new way of sending form data is done through AJAX/fetch requests, wherein the data |
|
|
|
|
|
are serialized into formats like JSON. To turn form data into a specific format requires access to the elements holding |
|
|
|
|
|
the values to each field in the form. |
|
|
|
|
|
|
|
|
|
|
|
Some libraries for extracting form values query field elements in the DOM, which is inefficient since they need to |
|
|
|
|
|
|
|
|
the default behavior of submitting form data is not always preferred, as this is done through loading or reloading a |
|
|
|
|
|
document as soon as the form is submitted. In addition, [applications have limited control over how the data are |
|
|
|
|
|
formatted on submission](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-fs-enctype) with |
|
|
|
|
|
this approach. This is why the new way of sending form data is done through AJAX/fetch requests, wherein the data are |
|
|
|
|
|
serialized into formats like JSON. To turn form data into a specific format requires access to the elements holding the |
|
|
|
|
|
values to each field in the form. |
|
|
|
|
|
|
|
|
|
|
|
Libraries made for extracting form values query field elements in the DOM, which is inefficient since they need to |
|
|
traverse the DOM tree in some way, using methods such as `document.getElementsByTagName()` and |
|
|
traverse the DOM tree in some way, using methods such as `document.getElementsByTagName()` and |
|
|
`document.querySelector()`. |
|
|
`document.querySelector()`. |
|
|
|
|
|
|
|
|
Upon retrieving the field values somehow, some libraries attempt to duplicate the values of the fields as they change, |
|
|
Upon retrieving the field values somehow, some libraries attempt to duplicate the values of the fields as they change, |
|
|
for instance by attaching event listeners and storing the new values into some internal object or map, which can be |
|
|
|
|
|
retrieved by some other exposed function. |
|
|
|
|
|
|
|
|
|
|
|
With `formxtra`, there is no need to traverse the DOM for individual fields to get their values. Provided the fields are |
|
|
|
|
|
associated to the form (either as a descendant of the `<form>` element or [associated through the `form=""` |
|
|
|
|
|
attribute](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form)) and has a valid |
|
|
|
|
|
`name`, the values of these fields can be easily extracted, using the `form.elements` attribute built-in to the DOM and |
|
|
|
|
|
used for getting its currently associated fields. With this, only the reference to the form is needed. The current state |
|
|
|
|
|
of the field elements are already stored in the DOM, waiting to be accessed. |
|
|
|
|
|
|
|
|
for instance by attaching event listeners and storing the new values into some internal object or map. This is then |
|
|
|
|
|
retrieved by some other exposed function or mechanism within that library. This is common with reactive frameworks, |
|
|
|
|
|
where changes to the document are essential to establish functionality and improved user experience. |
|
|
|
|
|
|
|
|
|
|
|
--- |
|
|
|
|
|
|
|
|
|
|
|
With `formxtra`, there is no need to traverse the DOM for individual fields to get their values, provided they are: |
|
|
|
|
|
|
|
|
|
|
|
* Associated to the form (either as a descendant of the `<form>` element or [associated through the `form=""` |
|
|
|
|
|
attribute](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form)) |
|
|
|
|
|
* Has a valid `name` |
|
|
|
|
|
|
|
|
|
|
|
The values of these fields can be easily extracted, using the `form.elements` attribute built-in to the DOM. With this, |
|
|
|
|
|
only the reference to the form is needed. The current state of the field elements is already stored in the DOM, waiting |
|
|
|
|
|
to be accessed. |
|
|
|
|
|
|
|
|
## Installation |
|
|
## Installation |
|
|
|
|
|
|
|
|