Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fregante/push-form
Zero-effort nanomodule to submit a `<form>` element via `fetch` and receive the response
https://github.com/fregante/push-form
ajax ajax-form dom form-submission javascript
Last synced: 28 days ago
JSON representation
Zero-effort nanomodule to submit a `<form>` element via `fetch` and receive the response
- Host: GitHub
- URL: https://github.com/fregante/push-form
- Owner: fregante
- License: mit
- Created: 2020-11-22T08:35:48.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-29T05:31:11.000Z (over 2 years ago)
- Last Synced: 2024-10-04T22:48:38.489Z (about 1 month ago)
- Topics: ajax, ajax-form, dom, form-submission, javascript
- Language: TypeScript
- Homepage: https://npm.im/push-form
- Size: 20.5 KB
- Stars: 19
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# push-form [![][badge-gzip]][link-bundlephobia]
[badge-gzip]: https://img.shields.io/bundlephobia/minzip/push-form.svg?label=gzipped
[link-bundlephobia]: https://bundlephobia.com/result?p=push-form
> Like `form.submit()`, but ajaxed. Lightweight, modern, promisified, uses `fetch`
Instead 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.
## Install
```
npm install push-form
```
```js
// This module is only offered as a ES Module
import pushForm from 'push-form';
```
## Usage
Given a regular form element:
```html
First name
Last name
Passport
Submit
```
You can post it via `fetch` with:
```js
import pushForm from 'push-form';
const form = document.querySelector('form');
form.addEventListener('submit', async event => {
event.preventDefault();
const response = await pushForm();
if (response.ok) {
alert('Thanks for your submission!');
}
});
```
Or use `ajaxifyForm` to have it handle the user submission automatically:
```js
import {ajaxifyForm} from 'push-form';
const form = document.querySelector('form');
ajaxifyForm(form, {
onSuccess: () => {/* ✅ */},
onError: () => {/* ❌ */},
});
```
## API
### pushForm(formElement, requestInit)
Returns a `Promise` that resolves with a `Response` exactly as `fetch` does.
#### formElement
Type: `HTMLFormElement`
The form to submit. Its `action` and `method` attributes will be used to create the HTTP request.
#### requestInit
Type: `object`
Example: `{headers: {Accept: 'application/json'}}`
This 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.
### ajaxifyForm(formElement, options)
Stops the `submit` event of a form and uses `pushForm` instead. This returns a `function` that you can call to remove the `submit` handler.
#### formElement
Same as the one in `pushForm`
#### options
Type: `object`
Optional submission/error handlers and configuration for the `fetch`.
##### onSuccess
Type: `function`
Example: `(fetchResponse) => {alert('The form was submitted!')}`
It will be called when `fetch` makes the request and the server returns a successful response (`response.ok`)
##### onError
Type: `function`
Example: `(error) => {alert('Something happened:' + error.message)}`
It will be called when `fetch` fails the request or if the server returns an error response (`response.ok === false`)
##### requestInit
Same as the one in `pushForm`.
## Related
- [select-dom](https://github.com/fregante/select-dom) - Lightweight `querySelector`/`All` wrapper that outputs an Array.
- [doma](https://github.com/fregante/doma) - Parse an HTML string into `DocumentFragment` or one `Element`, in a few bytes.
- [Refined GitHub](https://github.com/sindresorhus/refined-github) - Uses this module.