push form

bentuk dorong

Suka form.submit() , tetapi ajax. Ringan, modern, dijanjikan, menggunakan fetch

Daripada menyebabkan pemuatan halaman seperti yang dilakukan form.submit() , Anda dapat menggunakan pushForm(form) untuk mengirim formulir melalui fetch . Secara otomatis membaca semua bidang menggunakan API modern dan melakukan permintaan persis seperti yang dijelaskan oleh atribut form .

Memasang

 npm install push-form

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

Penggunaan

Diberikan elemen bentuk biasa:

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

Anda dapat mempostingnya melalui fetch dengan:

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

Atau gunakan ajaxifyForm untuk menangani pengiriman pengguna secara otomatis:

 import { ajaxifyForm } from 'push-form' ;

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

API

pushForm(formElement, permintaanInit)

Mengembalikan Promise yang diselesaikan dengan Response persis seperti yang dilakukan fetch .

elemen bentuk

Ketik: HTMLFormElement

Formulir untuk diserahkan. Atribut action dan method akan digunakan untuk membuat permintaan HTTP.

permintaanInit

Jenis: object
Contoh: {headers: {Accept: 'application/json'}}

Ini cocok dengan parameter kedua dari fetch , namun body dan method akan diganti dengan apa yang ditentukan elemen form dalam atributnya.

ajaxifyForm(formElement, opsi)

Menghentikan acara submit formulir dan menggunakan pushForm sebagai gantinya. Ini mengembalikan function yang dapat Anda panggil untuk menghapus pengendali submit .

elemen bentuk

Sama seperti yang ada di pushForm

pilihan

Jenis: object

Penanganan dan konfigurasi pengiriman/kesalahan opsional untuk fetch .

pada Sukses

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

Ini akan dipanggil ketika fetch membuat permintaan dan server mengembalikan respons yang berhasil ( response.ok )

diError

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

Ini akan dipanggil ketika fetch gagal dalam permintaan atau jika server mengembalikan respons kesalahan ( response.ok === false )

permintaanInit

Sama seperti yang ada di pushForm .

Terkait

• select-dom - querySelector ringan / All pembungkus yang menghasilkan Array.
• doma - Parsing string HTML menjadi DocumentFragment atau satu Element , dalam beberapa byte.
• GitHub yang Disempurnakan - Menggunakan modul ini.