push form

Push-Form

Wie form.submit() , aber ajaxiert. Leicht, modern, versprochen, nutzt fetch

Anstatt einen Seitenladevorgang zu verursachen, wie dies bei form.submit() der Fall ist, können Sie pushForm(form) verwenden, um ein Formular per fetch zu senden. Es liest mithilfe moderner APIs automatisch alle Felder aus und führt die Anfrage genau so aus, wie es in den form beschrieben ist.

Installieren

 npm install push-form

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

Verwendung

Gegeben ein reguläres Formelement:

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

Sie können es per fetch posten mit:

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

Oder verwenden Sie ajaxifyForm , damit die Benutzerübermittlung automatisch verarbeitet wird:

 import { ajaxifyForm } from 'push-form' ;

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

API

pushForm(formElement, requestInit)

Gibt ein Promise zurück, das genau wie fetch mit einer Response aufgelöst wird.

formElement

Typ: HTMLFormElement

Das Formular zum Absenden. Seine action und method werden zum Erstellen der HTTP-Anfrage verwendet.

requestInit

Typ: object
Beispiel: {headers: {Accept: 'application/json'}}

Dies entspricht dem zweiten Parameter von fetch , jedoch werden der body und method mit den Angaben des form in seinen Attributen überschrieben.

ajaxifyForm(formElement, Optionen)

Stoppt das submit -Ereignis eines Formulars und verwendet stattdessen pushForm . Dadurch wird eine function zurückgegeben, die Sie aufrufen können, um den submit Handler zu entfernen.

formElement

Das Gleiche wie in pushForm

Optionen

Typ: object

Optionale Übermittlungs-/Fehlerhandler und Konfiguration für den fetch .

onSuccess

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

Es wird aufgerufen, wenn fetch die Anfrage stellt und der Server eine erfolgreiche Antwort ( response.ok ) zurückgibt.

onError

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

Es wird aufgerufen, wenn fetch der Anfrage fehlschlägt oder der Server eine Fehlerantwort zurückgibt ( response.ok === false ).

requestInit

Dasselbe wie in pushForm .

Verwandt

• select-dom – Leichter querySelector / All -Wrapper, der ein Array ausgibt.
• doma – Analysieren Sie eine HTML-Zeichenfolge in DocumentFragment oder ein Element in wenigen Bytes.
• Verfeinerter GitHub – Verwendet dieses Modul.