push form

formulaire push

Comme form.submit() , mais en ajax. Léger, moderne, promis, utilise fetch

Au lieu de provoquer un chargement de page comme le fait form.submit() , vous pouvez utiliser pushForm(form) pour envoyer un formulaire via fetch . Il lit automatiquement tous les champs à l'aide d'API modernes et exécute la requête exactement comme décrit par les attributs form .

Installer

 npm install push-form

 // This module is only offered as a ES Module
import pushForm from 'push-form' ; 

Usage

Étant donné un élément de formulaire régulier :

 < 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 >

Vous pouvez le publier via fetch avec :

 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!' ) ;
	}
} ) ;

Ou utilisez ajaxifyForm pour qu'il gère automatiquement la soumission de l'utilisateur :

 import { ajaxifyForm } from 'push-form' ;

const form = document . querySelector ( 'form' ) ;
ajaxifyForm ( form , {
	onSuccess : ( ) => { /* ✅ */ } ,
	onError : ( ) => { /*  */ } ,
} ) ; 

API

pushForm (formElement, requestInit)

Renvoie une Promise qui se résout avec une Response exactement comme le fait fetch .

élément de formulaire

Type : HTMLFormElement

Le formulaire à soumettre. Ses attributs action et method seront utilisés pour créer la requête HTTP.

requêteInit

Type : object
Exemple : {headers: {Accept: 'application/json'}}

Cela correspond au deuxième paramètre de fetch , mais le body et method seront remplacés par ce que l'élément form spécifie dans ses attributs.

ajaxifyForm(formElement, options)

Arrête l'événement submit d'un formulaire et utilise pushForm à la place. Cela renvoie une function que vous pouvez appeler pour supprimer le gestionnaire submit .

élément de formulaire

Identique à celui de pushForm

choix

Type : object

Gestionnaires de soumission/erreur facultatifs et configuration pour le fetch .

surSuccès

Type : function
Exemple : (fetchResponse) => {alert('The form was submitted!')}

Il sera appelé lorsque fetch fera la demande et que le serveur renverra une réponse réussie ( response.ok )

surErreur

Type : function
Exemple : (error) => {alert('Something happened:' + error.message)}

Il sera appelé lorsque fetch échoue à la requête ou si le serveur renvoie une réponse d'erreur ( response.ok === false )

requêteInit

Identique à celui de pushForm .

En rapport

• select-dom - querySelector / All wrapper léger qui génère un tableau.
• doma - Analyse une chaîne HTML dans DocumentFragment ou un Element , en quelques octets.
• GitHub raffiné – Utilise ce module.