push form

formulario de empuje

Como form.submit() , pero ajax. Ligero, moderno, promisificado, utiliza fetch

En lugar de provocar una carga de página como lo hace form.submit() , puede usar pushForm(form) para enviar un formulario mediante fetch . Lee automáticamente todos los campos utilizando API modernas y realiza la solicitud exactamente como se describe en los atributos form .

Instalar

 npm install push-form

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

Uso

Dado un elemento de forma regular:

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

Puedes publicarlo a través de fetch con:

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

O use ajaxifyForm para que maneje el envío del usuario automáticamente:

 import { ajaxifyForm } from 'push-form' ;

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

API

pushForm(elementoformulario, solicitudInit)

Devuelve una Promise que se resuelve con una Response exactamente como lo hace fetch .

elemento de formulario

Tipo: HTMLFormElement

El formulario a enviar. Sus atributos action y method se utilizarán para crear la solicitud HTTP.

solicitudInit

Tipo: object
Ejemplo: {headers: {Accept: 'application/json'}}

Esto coincide con el segundo parámetro de fetch , sin embargo, el body y method se anularán con lo que el elemento form especifica en sus atributos.

ajaxifyForm(elementoformulario, opciones)

Detiene el evento submit de un formulario y utiliza pushForm en su lugar. Esto devuelve una function a la que puede llamar para eliminar el controlador submit .

elemento de formulario

Igual que el de pushForm

opciones

Tipo: object

Controladores de envío/error opcionales y configuración para la fetch .

en el éxito

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

Se llamará cuando fetch realice la solicitud y el servidor devuelva una respuesta exitosa ( response.ok ).

enError

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

Se llamará cuando fetch falle en la solicitud o si el servidor devuelve una respuesta de error ( response.ok === false )

solicitudInit

Igual que el de pushForm .

Relacionado

• select-dom: querySelector ligero/ All contenedor que genera una matriz.
• doma: analiza una cadena HTML en DocumentFragment o un Element , en unos pocos bytes.
• GitHub refinado: utiliza este módulo.