Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
TheoryOfNekomata 1ae8e04f57 Update counting 1年前
cypress Add support for multiple values 1年前
docs Update README 1年前
src Update counting 1年前
.eslintrc Switch to pridepack, add setFormValues 1年前
.gitignore Update README 3年前
.npmignore Update npmignore 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 Refactor code 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 Switch to pridepack, add setFormValues 1年前

README.md

formxtra

formxtra logo

The companion for Web forms!

Extract and set form values through the DOM.

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 });
});

Tests

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