push form

formulário push

Como form.submit() , mas com ajax. Leve, moderno, prometido, usa fetch

Em vez de causar um carregamento de página como form.submit() faz, você pode usar pushForm(form) para enviar um formulário via fetch . Ele lê automaticamente todos os campos usando APIs modernas e executa a solicitação exatamente conforme descrito pelos atributos form .

Instalar

 npm install push-form

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

Uso

Dado um elemento de formulário 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 >

Você pode publicá-lo via fetch com:

 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 use ajaxifyForm para que ele lide com o envio do usuário automaticamente:

 import { ajaxifyForm } from 'push-form' ;

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

API

pushForm(formElement, requestInit)

Retorna uma Promise que resolve com uma Response exatamente como fetch .

elemento de formulário

Tipo: HTMLFormElement

O formulário a ser enviado. Seus atributos action e method serão usados ​​para criar a solicitação HTTP.

solicitaçãoInit

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

Isso corresponde ao segundo parâmetro de fetch , porém o body e method serão substituídos pelo que o elemento form especifica em seus atributos.

ajaxifyForm(formElement, opções)

Interrompe o evento submit de um formulário e usa pushForm . Isso retorna uma function que você pode chamar para remover o manipulador submit .

elemento de formulário

Igual ao do pushForm

opções

Tipo: object

Manipuladores opcionais de envio/erro e configuração para fetch .

onSucesso

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

Será chamado quando fetch fizer a solicitação e o servidor retornar uma resposta bem-sucedida ( response.ok )

onError

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

Ele será chamado quando fetch falhar na solicitação ou se o servidor retornar uma resposta de erro ( response.ok === false )

solicitaçãoInit

O mesmo que em pushForm .

Relacionado

• select-dom - querySelector / All wrapper leve que gera um Array.
• doma - analisa uma string HTML em DocumentFragment ou um Element , em alguns bytes.
• GitHub refinado – usa este módulo.