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.