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.