Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 
TheoryOfNekomata 8e94d6057a Add directionality fallback 1 рік тому
cypress Modify get value test 1 рік тому
docs Add rationale information 1 рік тому
src Add directionality fallback 1 рік тому
.eslintrc Implement clearFormValues, improve test syntax 1 рік тому
.gitignore Add coverage reporting 1 рік тому
.npmignore Add coverage reporting 1 рік тому
.prettierrc Separate prettierrc 3 роки тому
LICENSE Switch to pridepack, add setFormValues 1 рік тому
README.md Update README 1 рік тому
cypress.json Add support for multiple values 1 рік тому
package.json Implement clearFormValues, improve test syntax 1 рік тому
pridepack.json Switch to pridepack, add setFormValues 1 рік тому
publish.sh Update usage notes, prepare for publishing 3 роки тому
test-globals.js Switch to pridepack, add setFormValues 1 рік тому
tsconfig.eslint.json Update tsconfig 1 рік тому
tsconfig.json Update tsconfig 1 рік тому
vitest.config.js Switch to pridepack, add setFormValues 1 рік тому
yarn.lock Add coverage reporting 1 рік тому

README.md

formxtra

The companion for Web forms!

Extract and set form values through the DOM—no frameworks required!
Lightweight. Simple. It Just Works.

Installation and Sources

The package can be found on:

The package sources can be found on the main Modal Code repository with an active GitHub mirror.

Usage

  1. Lay out your input elements (all valid input types supported including <select> and <textarea>) then bind them to a form:
    • Put them inside a <form>.
    • Alternatively, use the form="" attribute then specify the form id where they will be bound.
  2. Add name="" attributes to your input elements.
  3. Get your <form> element:
    • Query the form directly.
    • If you want to retrieve/set the form values through an individual input element (e.g. in the case of value change events like onchange), use the inputElement.form attribute.
  4. Use getFormValues() to retrieve all bound input elements’ values, or setFormValues() to set them (setting only some fields’ values is supported).

Example

Interactive code samples can be found on Codepen:

For an example form:

<form id="loginForm" aria-label="Login Form">
  <button id="autofill" type="button">
    Autofill login form (username: admin, remember: true)
  </button>
  
  <hr />
  
  <fieldset>
    <legend>
      Login
    </legend>
    <div>
      <input type="text" name="username" placeholder="Username" />
    </div>
    <div>
      <input type="password" name="password" placeholder="Password" />
    </div>
    <div>
      <button type="submit" name="type" value="client">
        Log In As Client
      </button>
      <button type="submit" name="type" value="admin">
        Log In As Admin
      </button>
    </div>
  </fieldset>
</form>

<!-- Input elements can be placed outside the form element they are bound to. -->

<label>
  <input type="checkbox" name="remember" form="loginForm" />
  Remember my login credentials
</label>

Use the library as follows (code is in TypeScript, but can work with JavaScript as well):

import { getFormValues, setFormValues } from '@theoryofnekomata/formxtra';

const form: HTMLFormElement = document.getElementById('loginForm');

const processResponse = async (response: Response) => {
  const result = await response.json();

  alert(`Welcome ${result.user}!`);
};

// Use formxtra in event handlers
form.addEventListener('submit', async e => {
  const {
    currentTarget: thisForm,
    submitter,
  } = e;
  e.preventDefault();

  const values = getFormValues(thisForm, { submitter });

  // Get the form values and send as request to some API
  const response = await fetch(
    'https://example.com/api/log-in',
    {
      method: 'POST',
      body: JSON.stringify(values),
      headers: {
        'Content-Type': 'application/json',
      },
    },
  );

  if (response.ok) {
    processResponse(response);
    return;
  }
  
  alert('Invalid login!');
});

// You can use fomrxtra directly with elements as long as they are bound to a form.
const autofillButton = document.getElementById('autofill');

autofillButton.addEventListener('click', e => {
  setFormValues(e.currentTarget.form, { username: 'admin', remember: true });
});

API

These are all the exported methods in the library:

import {
  getFormValues,
  setFormValues,
  clearFormValues,
  getValue,
  isElementValueIncludedInFormSubmit,
  isFieldElement,
} from '@theoryofnekomata/formxtra';

One would usually need only the getFormValues() and setFormValues() functions, however if the utility functions are needed, the proper usages are documented via TSDoc comments.

Additional Information

The library has been tested on the static DOM using JSDOM, and the real dynamic DOM using Cypress. This is to guarantee compatibility across environments.

See the documentation folder for more details on this library.

You may need the event-submitter-polyfill package for browsers that do not support the submitter property on submit events. The submitter element is needed for tracking which button triggered a form submission, and it may contain name and value attributes which are used to add values to the form (such as specifying which action to take for the rest of the form values). Refer to the usability table for SubmitEvent.submitter to check if your target browser is supported.

There is no support for <input type="image"> elements. It is recommended to handle the XY coordinates tracking separately as mouse events when using said elements as submitters.

The sources are under the MIT license.