JavaScript の formdata イベントのまとめ
JavaScript (以下 JS )の formdata
イベントについて簡単にまとめました。
formdata
イベントとは
formdata
イベントは HTML のフォーム( <form>
)の送信処理の直前に発火するイベントです。
従来の submit
イベントよりも後のタイミングで発火します。
セットされたイベントハンドラは同期的にディスパッチされるため( dispatched synchronously )、サーバーへの通信はイベントハンドラの処理が完了した後に行われます。
Google Chrome にはバージョン 77 ( 2019 年 9 月リリース)で導入されました。 Chrome 以外のブラウザにいつ頃導入されるのかというのは記事執筆時点ではわかっていません。
formdata
イベントを含む一連の処理の正確な流れについては次のページが参考になります:
以下使い方について。
formdata
イベントの使い方
formdata
イベントでは、イベントハンドラに引数として渡される Event
オブジェクトに formData
というプロパティがセットされています。
formData
の中身は、対象のフォームのデータを一式格納した FormData
オブジェクトです。
form.addEventListener('formdata', event => {// フォームの FormData オブジェクトにアクセスできるconsole.log(event.formData);// キーを確認するconsole.log(Array.from(event.formData.keys()));// バリューを確認するconsole.log(Array.from(event.formData.values()));// キー・バリューのペアを確認するconsole.log(Array.from(event.formData.entries()));});
この event.formData
を使うことで、フォームデータがサーバーに送信される直前のタイミングでデータの追加・変更・削除がかんたんに行えます。
form.addEventListener('formdata', event => {// キー・バリューを追加する// キーがすでに存在する場合は同じキーで値を追加するevent.formData.append('key', 'value');// 特定のキーの値をセットする// キーがすでに存在する場合は上書き、存在しない場合は追加するevent.formData.set('key', 'value');// 特定のキーのエントリーを削除するevent.formData.delete('key');});
FormData
オブジェクトの詳細のインタフェースについては Mozilla のページにわかりやすく説明されているので興味がある方はそちらのページを見てみてください。
記事作成時点で FormData
が持つメソッド一覧は次のとおりとなっています:
FormData.append()FormData.delete()FormData.entries()FormData.get()FormData.getAll()FormData.has()FormData.keys()FormData.set()FormData.values()
formdata
イベントのメリットは、フォーム送信時の送信データへのアクセスと追加・変更・削除がかんたんにできることです。
(私が理解しているかぎり)従来からある submit
イベントを使っても同様のことはできたのですが、その方法が回りくどくあまり直感的ではありませんでした。
具体的には、 submit
イベントのイベントハンドラからはフォームの FormData
オブジェクトにアクセスすることができないため、データを追加したいときは「フォームに hidden input 要素を追加する」、データを変更したいときは「フォームの elements
プロパティの奥の方で変更を加える」、という間接的なアプローチを採る必要がありました。
要は、フォームのデータをちょろっといじりたいだけでも DOM を操作する必要がありました。
submit
を使った場合のフォーム送信データの追加や変更のイメージは次のとおりです:
form.addEventListener('submit', event => {// hidden input をフォームに追加することでデータを追加するlet input = document.createElement('input');input.setAttribute('type', 'hidden');input.setAttribute('name', 'new key');input.setAttribute('value', 'new value');event.target.appendChild(input);// フォームの elements の中身を変更することでデータを変更するfor (let element of event.target.elements) {if (element.name === 'target') {element.value += ' extra suffix';}}});
ちなみに、 formdata
イベントはキャンセル不可とのことで、イベントハンドラで event.preventDefault()
を呼んでもフォームの送信のキャンセルはできません。
バリデーションをかけ条件によってはデータ送信をキャンセルしたいような場合には従来の submit
イベントを使うことになります。
以上です。
コメント
個人的な経験では、フォームを使わず JS 側だけで通信を行う完全な Single Page Application ではなくて、ひとつのページの中でフォームと Vue.js 等のフレームワークを両方使うような場合には、この「フォーム送信時にデータを追加・変更する」という処理をしたくなることが結構ある気がします。
記事作成時点では formdata
イベントが登場して間もない & Chrome 以外ではまだ使えないため実プロジェクトで使ったことはありませんが、フォームの送信データを DOM を介さず直接変更できるというのはとても便利なので今後 formata
イベントの利用頻度が増えてくることと思います。