Like
form.submit()
, but ajaxed. Lightweight, modern, promisified, usesfetch
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.
npm install push-form
// This module is only offered as a ES Module
import pushForm from 'push-form';
Given a regular form element:
<form action="submissions.php" type="post">
First name <input name="firstname" required /><br />
Last name <input name="lastname" required /><br />
Passport <input name="passport" type="file" required />
<button>Submit</button>
</form>
You can post it via fetch
with:
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:
import {ajaxifyForm} from 'push-form';
const form = document.querySelector('form');
ajaxifyForm(form, {
onSuccess: () => {/* ✅ */},
onError: () => {/* ❌ */},
});
Returns a Promise
that resolves with a Response
exactly as fetch
does.
Type: HTMLFormElement
The form to submit. Its action
and method
attributes will be used to create the HTTP request.
Type: object
Example: {headers: {Accept: 'application/json'}}
This matches the second parameter of fetch
, however the body
and method
will be overridden with what the form
element specifies in its attributes.
Stops the submit
event of a form and uses pushForm
instead. This returns a function
that you can call to remove the submit
handler.
Same as the one in pushForm
Type: object
Optional submission/error handlers and configuration for the fetch
.
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
)
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
)
Same as the one in pushForm
.
- select-dom - Lightweight
querySelector
/All
wrapper that outputs an Array. - doma - Parse an HTML string into
DocumentFragment
or oneElement
, in a few bytes. - Refined GitHub - Uses this module.