HTMLFormElement: formdata イベント
formdata
イベントは、フォームのデータを表す項目リストが構築された後に発行されます。このイベントは、フォームが送信されたときに発行されますが、 FormData()
コンストラクターが呼び出されたときにも発行されます。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを使用するかしてください。
addEventListener('formdata', (event) => {});
onformdata = (event) => { };
イベント型
FormDataEvent
です。 Event
から継承しています。
イベントプロパティ
親インターフェイスである Event
から継承したプロパティがあります。
FormDataEvent.formData
-
イベントが発行されたときにフォームに含まれていたデータを表す
FormData
オブジェクトが格納されています。
例
// フォームの参照を得る
const formElem = document.querySelector('form');
// submit ハンドラー
formElem.addEventListener('submit', (e) => {
// フォームの送信時、既定の動作を抑止
e.preventDefault();
console.log(formElem.querySelector('input[name="field1"]')); // FOO
console.log(formElem.querySelector('input[name="field2"]')); // BAR
// FormData オブジェクトを構築し、 formdata イベントが発行される
const formData = new FormData(formElem);
// formdata は formdata イベントで変更されます。
console.log(formData.get('field1')); // foo
console.log(formData.get('field2')); // bar
});
// データを受け取るための formdata ハンドラー
formElem.addEventListener('formdata', (e) => {
console.log('formdata fired');
// イベントオブジェクトからフォームデータを取得する
const formData = e.formData;
// formdata イベントでフォームデータを変更する
formData.set('field1', formData.get('field1').toLowerCase());
formData.set('field2', formData.get('field2').toLowerCase());
});
onformdata
版はこのようになります。
formElem.onformdata = (e) => {
console.log('formdata fired');
// フォームデータを変更
const formData = e.formData;
formData.set('field1', formData.get('field1').toLowerCase());
formData.set('field2', formData.get('field2').toLowerCase());
};
仕様書
Specification |
---|
HTML Standard # event-formdata |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- HTML の
<form>
要素 FormDataEvent