{"id":15357494,"url":"https://github.com/fregante/push-form","last_synced_at":"2025-04-15T06:51:59.068Z","repository":{"id":41208125,"uuid":"314993106","full_name":"fregante/push-form","owner":"fregante","description":"Zero-effort nanomodule to submit a `\u003cform\u003e` element via `fetch` and receive the response","archived":false,"fork":false,"pushed_at":"2022-06-29T05:31:11.000Z","size":21,"stargazers_count":19,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T17:21:19.267Z","etag":null,"topics":["ajax","ajax-form","dom","form-submission","javascript"],"latest_commit_sha":null,"homepage":"https://npm.im/push-form","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fregante.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-22T08:35:48.000Z","updated_at":"2024-07-28T10:39:59.000Z","dependencies_parsed_at":"2022-08-27T06:50:40.755Z","dependency_job_id":null,"html_url":"https://github.com/fregante/push-form","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fpush-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fpush-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fpush-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fpush-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fregante","download_url":"https://codeload.github.com/fregante/push-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248997055,"owners_count":21195801,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","ajax-form","dom","form-submission","javascript"],"created_at":"2024-10-01T12:35:31.316Z","updated_at":"2025-04-15T06:51:59.002Z","avatar_url":"https://github.com/fregante.png","language":"TypeScript","readme":"# push-form [![][badge-gzip]][link-bundlephobia]\n\n[badge-gzip]: https://img.shields.io/bundlephobia/minzip/push-form.svg?label=gzipped\n[link-bundlephobia]: https://bundlephobia.com/result?p=push-form\n\n\u003e Like `form.submit()`, but ajaxed. Lightweight, modern, promisified, uses `fetch`\n\nInstead of causing a page load like `form.submit()` does, you can use `pushForm(form)` to send a form via `fetch`. It automatically reads all the fields using modern APIs and performs the request exactly as described by the `form` attributes.\n\n## Install\n\n```\nnpm install push-form\n```\n\n```js\n// This module is only offered as a ES Module\nimport pushForm from 'push-form';\n```\n\n## Usage\n\nGiven a regular form element:\n\n```html\n\u003cform action=\"submissions.php\" type=\"post\"\u003e\n\tFirst name \u003cinput name=\"firstname\" required /\u003e\u003cbr /\u003e\n\tLast name \u003cinput name=\"lastname\" required /\u003e\u003cbr /\u003e\n\tPassport \u003cinput name=\"passport\" type=\"file\" required /\u003e\n\t\u003cbutton\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\nYou can post it via `fetch` with:\n\n```js\nimport pushForm from 'push-form';\n\nconst form = document.querySelector('form');\nform.addEventListener('submit', async event =\u003e {\n\tevent.preventDefault();\n\tconst response = await pushForm();\n\tif (response.ok) {\n\t\talert('Thanks for your submission!');\n\t}\n});\n```\n\nOr use `ajaxifyForm` to have it handle the user submission automatically:\n\n```js\nimport {ajaxifyForm} from 'push-form';\n\nconst form = document.querySelector('form');\najaxifyForm(form, {\n\tonSuccess: () =\u003e {/* ✅ */},\n\tonError: () =\u003e {/* ❌ */},\n});\n```\n\n## API\n\n### pushForm(formElement, requestInit)\n\nReturns a `Promise` that resolves with a `Response` exactly as `fetch` does.\n\n#### formElement\n\nType: `HTMLFormElement`\n\nThe form to submit. Its `action` and `method` attributes will be used to create the HTTP request.\n\n#### requestInit\n\nType: `object` \u003cbr\u003e\nExample: `{headers: {Accept: 'application/json'}}`\n\nThis matches the second parameter of [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch), however the `body` and `method` will be overridden with what the `form` element specifies in its attributes.\n\n### ajaxifyForm(formElement, options)\n\nStops the `submit` event of a form and uses `pushForm` instead. This returns a `function` that you can call to remove the `submit` handler.\n\n#### formElement\n\nSame as the one in `pushForm`\n\n#### options\n\nType: `object`\n\nOptional submission/error handlers and configuration for the `fetch`.\n\n##### onSuccess\n\nType: `function`\u003cbr\u003e\nExample: `(fetchResponse) =\u003e {alert('The form was submitted!')}`\n\nIt will be called when `fetch` makes the request and the server returns a successful response (`response.ok`)\n\n##### onError\n\nType: `function`\u003cbr\u003e\nExample: `(error) =\u003e {alert('Something happened:' + error.message)}`\n\nIt will be called when `fetch` fails the request or if the server returns an error response (`response.ok === false`)\n\n##### requestInit\n\nSame as the one in `pushForm`.\n\n## Related\n\n- [select-dom](https://github.com/fregante/select-dom) - Lightweight `querySelector`/`All` wrapper that outputs an Array.\n- [doma](https://github.com/fregante/doma) - Parse an HTML string into `DocumentFragment` or one `Element`, in a few bytes.\n- [Refined GitHub](https://github.com/sindresorhus/refined-github) - Uses this module.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffregante%2Fpush-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffregante%2Fpush-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffregante%2Fpush-form/lists"}