Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

README.md 2.2 KiB

3 years ago
3 years ago
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. # formxtra
  2. ![formxtra logo](./docs/assets/formxtra.svg)
  3. **The companion for Web forms!**
  4. Extract and set form values through the DOM.
  5. ## Installation
  6. The package can be found on:
  7. - [Modal Pack](https://js.pack.modal.sh)
  8. - [npm](https://npmjs.com/package/@theoryofnekomata/formxtra)
  9. - [GitHub Package Registry](https://github.com/TheoryOfNekomata/formxtra/packages/793279)
  10. ## Usage
  11. For an example form:
  12. ```html
  13. <button id="autofill" type="button">
  14. Autofill login form
  15. </button>
  16. <form id="loginForm">
  17. <input type="text" name="username" />
  18. <input type="password" name="password" />
  19. <button type="submit" name="type" value="client">
  20. Log In As Client
  21. </button>
  22. <button type="submit" name="type" value="admin">
  23. Log In As Admin
  24. </button>
  25. </form>
  26. <label>
  27. <input type="checkbox" name="remember" form="loginForm" />
  28. Remember my login credentials
  29. </label>
  30. ```
  31. Use the library as follows (code is in TypeScript, but can work with JavaScript as well):
  32. ```typescript
  33. import { getFormValues, setFormValues } from '@theoryofnekomata/formxtra';
  34. // This is the only query we need. On libraries like React, we can easily get form elements when we
  35. // attach submit event listeners.
  36. const form: HTMLFormElement = document.getElementById('form');
  37. const processResponse = async (response: Response) => {
  38. const result = await response.json();
  39. alert(`Welcome ${result.user}!`);
  40. };
  41. // Best use case is with event handlers
  42. form.addEventListener('submit', async e => {
  43. const {
  44. currentTarget: thisForm,
  45. submitter,
  46. } = e;
  47. e.preventDefault();
  48. const values = getFormValues(thisForm, { submitter });
  49. // Get the form values and send as request to some API
  50. const response = await fetch(
  51. 'https://example.com/api/log-in',
  52. {
  53. method: 'POST',
  54. body: JSON.stringify(values),
  55. headers: {
  56. 'Content-Type': 'application/json',
  57. },
  58. },
  59. );
  60. if (response.ok) {
  61. processResponse(response);
  62. }
  63. });
  64. const autofillButton = document.getElementById('autofill');
  65. autofillButton.addEventListener('click', e => {
  66. setFormValues(form, { username: 'admin', remember: true });
  67. });
  68. ```
  69. ## Tests
  70. The library has been tested on the static DOM using JSDOM, and the real dynamic DOM using Cypress.