Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
TheoryOfNekomata 8511d76949 Update README vor 1 Jahr
cypress Cover all input types vor 1 Jahr
docs Update README vor 1 Jahr
src Update documentation vor 1 Jahr
.eslintrc Switch to pridepack, add setFormValues vor 1 Jahr
.gitignore Add coverage reporting vor 1 Jahr
.npmignore Add coverage reporting vor 1 Jahr
.prettierrc Separate prettierrc vor 3 Jahren
LICENSE Switch to pridepack, add setFormValues vor 1 Jahr
README.md Update README vor 1 Jahr
cypress.json Add support for multiple values vor 1 Jahr
package.json Update tests, fix multiple value setting vor 1 Jahr
pridepack.json Switch to pridepack, add setFormValues vor 1 Jahr
publish.sh Update usage notes, prepare for publishing vor 3 Jahren
test-globals.js Switch to pridepack, add setFormValues vor 1 Jahr
tsconfig.eslint.json Update tsconfig vor 1 Jahr
tsconfig.json Update tsconfig vor 1 Jahr
vitest.config.js Switch to pridepack, add setFormValues vor 1 Jahr
yarn.lock Add coverage reporting vor 1 Jahr

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

The package can be found on:

Usage

For an example form:

<button id="autofill" type="button">
  Autofill login form
</button>

<form id="loginForm">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit" name="type" value="client">
    Log In As Client
  </button>
  <button type="submit" name="type" value="admin">
    Log In As Admin
  </button>
</form>

<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';

// This is the only query we need. On libraries like React, we can easily get form elements when we
// attach submit event listeners.
const form: HTMLFormElement = document.getElementById('form');

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

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

// Best use case is with 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);
  }
});

const autofillButton = document.getElementById('autofill');

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

There are utility functions exported alongside getFormValues() and setFormValues(). You may want to use namespace import with this library, i.e. import * as formxtra from '@theoryofnekomata/formxtra'.

See the documentation folder for more details.

Tests

The library has been tested on the static DOM using JSDOM, and the real dynamic DOM using Cypress.

License

MIT