Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. # formxtr
  2. Extract form values through the DOM.
  3. ## Installation
  4. The package can be found on:
  5. - [Modal Pack](https://js.pack.modal.sh)
  6. - [npm](https://npmjs.com/package/formxtr)
  7. - [GitHub Package Registry](https://github.com/TheoryOfNekomata/formxtr/packages/784699)
  8. ## Usage
  9. For an example form:
  10. ```html
  11. <!-- ... -->
  12. <form id="form">
  13. <input type="text" name="username" />
  14. <input type="password" name="password" />
  15. <button type="submit" name="type" value="client">Log In As Client</button>
  16. <button type="submit" name="type" value="admin">Log In As Admin</button>
  17. </form>
  18. <!-- ... --->
  19. ```
  20. Use the library as follows (code is in TypeScript, but can work with JavaScript as well):
  21. ```typescript
  22. import getFormValues from '@theoryofnekomata/formxtr';
  23. const form: HTMLFormElement = document.getElementById('form');
  24. // optional, but just in case there are multiple submit buttons in the form,
  25. // individual submitters can be considered
  26. const submitter = form.querySelector('[type="submit"][name="type"][value="client"]');
  27. const values = getFormValues(form, submitter);
  28. const processResult = (result: Record<string, unknown>) => {
  29. throw new Error('Not yet implemented.');
  30. };
  31. // Best use case is with event handlers
  32. form.addEventListener('submit', async e => {
  33. const { target: form, submitter } = e;
  34. e.preventDefault();
  35. const values = getFormValues(form, submitter);
  36. // Get the form values and send as request to some API
  37. const response = await fetch(
  38. 'https://example.com/api/log-in',
  39. {
  40. method: 'POST',
  41. body: JSON.stringify(values),
  42. headers: {
  43. 'Content-Type': 'application/json',
  44. },
  45. },
  46. );
  47. if (response.ok) {
  48. const result = await response.json();
  49. processResult(result);
  50. }
  51. })
  52. ```
  53. ## Tests
  54. The library has been tested on JSDOM through Jest, and the real DOM using Cypress.