TheoryOfNekomata 4fb3c83043 | pirms 3 gadiem | |
---|---|---|
cypress | pirms 3 gadiem | |
src | pirms 3 gadiem | |
test | pirms 3 gadiem | |
.gitignore | pirms 3 gadiem | |
LICENSE | pirms 3 gadiem | |
README.md | pirms 3 gadiem | |
cypress.json | pirms 3 gadiem | |
jest.config.js | pirms 3 gadiem | |
package.json | pirms 3 gadiem | |
publish.sh | pirms 3 gadiem | |
tsconfig.json | pirms 3 gadiem | |
yarn.lock | pirms 3 gadiem |
Extract form values through the DOM.
The library is not yet out on any package manager. Installing through the URL is the preferred way.
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.