push form

プッシュフォーム

form.submit()と似ていますが、ajax 化されています。軽量、モダン、約束された、 fetch使用

form.submit()のようにページをロードする代わりに、 pushForm(form)を使用してfetch経由でフォームを送信できます。最新の API を使用してすべてのフィールドを自動的に読み取り、 form属性で記述されたとおりにリクエストを正確に実行します。

インストール

 npm install push-form

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

使用法

通常のフォーム要素を指定すると、次のようになります。

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

次のようにfetch経由で投稿できます。

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

または、 ajaxifyForm使用して、ユーザーの送信を自動的に処理させます。

 import { ajaxifyForm } from 'push-form' ;

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

API

PushForm(formElement, requestInit)

fetchとまったく同じようにResponseで解決されるPromise返します。

フォーム要素

タイプ: HTMLFormElement

送信するフォーム。そのaction属性とmethod属性は、HTTP リクエストの作成に使用されます。

requestInit

タイプ: object
例: {headers: {Accept: 'application/json'}}

これはfetchの 2 番目のパラメータと一致しますが、 bodyとmethod form要素の属性で指定した内容でオーバーライドされます。

ajaxifyForm(formElement, オプション)

フォームのsubmitイベントを停止し、代わりにpushForm使用します。これにより、 submitハンドラーを削除するために呼び出すことができるfunctionが返されます。

フォーム要素

pushFormのものと同じ

オプション

タイプ: object

オプションの送信/エラー ハンドラーとfetchの構成。

成功時

タイプ: function
例: (fetchResponse) => {alert('The form was submitted!')}

これは、 fetchリクエストを作成し、サーバーが成功した応答 ( response.ok ) を返したときに呼び出されます。

onError

タイプ: function
例: (error) => {alert('Something happened:' + error.message)}

これは、 fetchリクエストに失敗した場合、またはサーバーがエラー応答 ( response.ok === false ) を返した場合に呼び出されます。

requestInit

pushFormのものと同じです。

関連している

• select-dom - 配列を出力する軽量のquerySelector / Allラッパー。
• doma - HTML 文字列を数バイトでDocumentFragmentまたは 1 つのElementに解析します。
• 洗練された GitHub - このモジュールを使用します。