Browse Source

Update package

Proofread README.
master
TheoryOfNekomata 3 years ago
parent
commit
8ca44c9c74
2 changed files with 24 additions and 18 deletions
  1. +23
    -17
      README.md
  2. +1
    -1
      package.json

+ 23
- 17
README.md View File

@@ -7,27 +7,33 @@ Extract form values through the DOM.
## Motivation

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
`document.querySelector()`.

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



+ 1
- 1
package.json View File

@@ -1,5 +1,5 @@
{
"version": "0.2.2",
"version": "0.2.3",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",


Loading…
Cancel
Save