TheoryOfNekomata e465109d74 | 1 year ago | |
---|---|---|
cypress | 1 year ago | |
docs | 1 year ago | |
src | 1 year ago | |
.eslintrc | 1 year ago | |
.gitignore | 1 year ago | |
.npmignore | 1 year ago | |
.prettierrc | 3 years ago | |
LICENSE | 1 year ago | |
README.md | 1 year ago | |
cypress.json | 1 year ago | |
package.json | 1 year ago | |
pridepack.json | 1 year ago | |
publish.sh | 3 years ago | |
test-globals.js | 1 year ago | |
tsconfig.eslint.json | 1 year ago | |
tsconfig.json | 1 year ago | |
vitest.config.js | 1 year ago | |
yarn.lock | 1 year ago |
The package can be found on:
The package sources can be found on the main Modal Code repository with an active GitHub mirror.
<select>
and <textarea>
) then bind them
to a form:
<form>
.form=""
attribute then specify the form id
where they will be bound.name=""
attributes to your input elements.<form>
element:
onchange
), use the inputElement.form
attribute.getFormValues()
to retrieve all bound input elements’ values, or setFormValues()
to set them (setting only
some fields’ values is supported).Interactive code samples can be found on Codepen:
For an example form:
<form id="loginForm" aria-label="Login Form">
<button id="autofill" type="button">
Autofill login form (username: admin, remember: true)
</button>
<hr />
<fieldset>
<legend>
Login
</legend>
<div>
<input type="text" name="username" placeholder="Username" />
</div>
<div>
<input type="password" name="password" placeholder="Password" />
</div>
<div>
<button type="submit" name="type" value="client">
Log In As Client
</button>
<button type="submit" name="type" value="admin">
Log In As Admin
</button>
</div>
</fieldset>
</form>
<!-- Input elements can be placed outside the form element they are bound to. -->
<label>
<input type="checkbox" name="remember" form="loginForm" />
Remember my login credentials
</label>
Use the library as follows (code is in TypeScript, but can work with JavaScript as well):
import { getFormValues, setFormValues } from '@theoryofnekomata/formxtra';
const form: HTMLFormElement = document.getElementById('loginForm');
const processResponse = async (response: Response) => {
const result = await response.json();
alert(`Welcome ${result.user}!`);
};
// Use formxtra in event handlers
form.addEventListener('submit', async e => {
const {
currentTarget: thisForm,
submitter,
} = e;
e.preventDefault();
const values = getFormValues(thisForm, { 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) {
processResponse(response);
return;
}
alert('Invalid login!');
});
// You can use fomrxtra directly with elements as long as they are bound to a form.
const autofillButton = document.getElementById('autofill');
autofillButton.addEventListener('click', e => {
setFormValues(e.currentTarget.form, { username: 'admin', remember: true });
});
These are all the exported methods in the library:
import {
getFormValues,
setFormValues,
clearFormValues,
getValue,
isElementValueIncludedInFormSubmit,
isFieldElement,
} from '@theoryofnekomata/formxtra';
One would usually need only the getFormValues()
and setFormValues()
functions, however if the utility functions are
needed, the proper usages are documented via TSDoc comments.
The library has been tested on the static DOM using JSDOM, and the real dynamic DOM using Cypress. This is to guarantee compatibility across environments.
See the documentation folder for more details on this library.
You may need the event-submitter-polyfill package for browsers
that do not support the submitter property on submit events. The submitter element is needed for
tracking which button triggered a form submission, and it may contain name
and value
attributes which are used to
add values to the form (such as specifying which action to take for the rest of the form values). Refer to the
usability table for SubmitEvent.submitter
to check if your target
browser is supported.
The sources are under the MIT license.