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.

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 one Element, in a few bytes.
• Refined GitHub - Uses this module.