Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
TheoryOfNekomata bc9b96b597 Merge branch 'master' of code.modal.sh:TheoryOfNekomata/formxtr 3年前
cypress Restructure tests, add other scenarios 3年前
src Restructure tests, add other scenarios 3年前
test/utils Restructure tests, add other scenarios 3年前
.gitignore Update README 3年前
.npmignore Update README 3年前
LICENSE Initial commit 3年前
README.md Merge branch 'master' of code.modal.sh:TheoryOfNekomata/formxtr 3年前
cypress.json Restructure tests, add other scenarios 3年前
jest.config.js Unify tests 3年前
package.json Restructure tests, add other scenarios 3年前
publish.sh Update usage notes, prepare for publishing 3年前
tsconfig.json Implement tests 3年前
yarn.lock Restructure tests, add other scenarios 3年前

README.md

formxtr

Extract form values through the DOM.

Motivation

There are many ways to lay out forms.

Installation

The package can be found on:

Usage

For an example form:

<!-- ...  -->

<form id="form">
	<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>

<!-- ... --->

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

import getFormValues from '@theoryofnekomata/formxtr';

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

// optional, but just in case there are multiple submit buttons in the form,
// individual submitters can be considered
const submitter = form.querySelector('[type="submit"][name="type"][value="client"]');

const values = getFormValues(form, submitter);

const processResult = (result: Record<string, unknown>) => {
  throw new Error('Not yet implemented.');
};

// Best use case is with event handlers
form.addEventListener('submit', async e => {
	const { target: form, submitter } = e;
	e.preventDefault();

	const values = getFormValues(form, 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) {
		const result = await response.json();

		processResult(result);
	}
})

Tests

The library has been tested on JSDOM through Jest, and the real DOM using Cypress.