Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 
TheoryOfNekomata 4fb3c83043 Update usage notes, prepare for publishing pirms 3 gadiem
cypress Implement cypress pirms 3 gadiem
src Unify tests pirms 3 gadiem
test Fix tests pirms 3 gadiem
.gitignore Initial commit pirms 3 gadiem
LICENSE Initial commit pirms 3 gadiem
README.md Update usage notes, prepare for publishing pirms 3 gadiem
cypress.json Unify tests pirms 3 gadiem
jest.config.js Unify tests pirms 3 gadiem
package.json Update usage notes, prepare for publishing pirms 3 gadiem
publish.sh Update usage notes, prepare for publishing pirms 3 gadiem
tsconfig.json Implement tests pirms 3 gadiem
yarn.lock Fix tests pirms 3 gadiem

README.md

formxtr

Extract form values through the DOM.

Installation

The library is not yet out on any package manager. Installing through the URL is the preferred way.

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.