TheoryOfNekomata bc9b96b597 | 3年前 | |
---|---|---|
cypress | 3年前 | |
src | 3年前 | |
test/utils | 3年前 | |
.gitignore | 3年前 | |
.npmignore | 3年前 | |
LICENSE | 3年前 | |
README.md | 3年前 | |
cypress.json | 3年前 | |
jest.config.js | 3年前 | |
package.json | 3年前 | |
publish.sh | 3年前 | |
tsconfig.json | 3年前 | |
yarn.lock | 3年前 |
Extract form values through the DOM.
There are many ways to lay out forms.
The package can be found on:
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);
}
})
The library has been tested on JSDOM through Jest, and the real DOM using Cypress.